animation

Baseline

Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since сентябрь 2015 г..

* Some parts of this feature may have varying levels of support.

See full compatibility
Learn more

CSS свойство animation это короткая запись для animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode и animation-play-state.

Интерактивный пример

animation: 3s ease-in 1s infinite reverse both running slidein;

animation: 3s linear 1s infinite running slidein;

animation: 3s linear 1s infinite alternate slidein;

animation: 0.5s linear 1s infinite alternate slidein;

<section class="flex-column" id="default-example">
  <div id="example-element"></div>
</section>

#example-element {
  background-color: #1766aa;
  margin: 20px;
  border: 5px solid #333;
  width: 150px;
  height: 150px;
  border-radius: 50%;
}

@keyframes slidein {
  from {
    margin-left: -20%;
  }
  to {
    margin-left: 100%;
  }
}

Описание того, какие свойства являются анимируемые доступно; стоит отметить, что это описание также подходит для CSS переходов.

Начальное значение	как и у каждого из подсвойств этого свойства: `animation-name`: `none` `animation-duration`: `0s` `animation-timing-function`: `ease` `animation-delay`: `0s` `animation-iteration-count`: `1` `animation-direction`: `normal` `animation-fill-mode`: `none` `animation-play-state`: `running` `animation-timeline`: `auto`
Применяется к	все элементы
Наследуется	нет
Обработка значения	как и у каждого из подсвойств этого свойства: `animation-name`: как указано `animation-duration`: как указано `animation-timing-function`: как указано `animation-delay`: как указано `animation-direction`: как указано `animation-iteration-count`: как указано `animation-fill-mode`: как указано `animation-play-state`: как указано `animation-timeline`: a list, each item either a case-sensitive CSS identifier or the keywords `none`, `auto`
Animation type	Not animatable

Синтаксис

css

/* @keyframes duration | timing-function | delay |
   iteration-count | direction | fill-mode | play-state | name */
animation: 3s ease-in 1s 2 reverse both paused slidein;

/* @keyframes duration | timing-function | delay | name */
animation: 3s linear 1s slidein;

/* @keyframes duration | name */
animation: 3s slidein;

Порядок важен в каждом определении анимации: первое значение, которое может быть проанализировано как <time> присваивается animation-duration, и второй назначен animation-delay.

Note that order is also important within each animation definition for distinguishing animation-name values from other keywords. When parsing, keywords that are valid for properties other than animation-name whose values were not found earlier in the shorthand must be accepted for those properties rather than for animation-name. Furthermore, when serializing, default values of other properties must be output in at least the cases necessary to distinguish an animation-name that could be a value of another property, and may be output in additional cases.