animation

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

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

Описание того, какие свойства являются анимируемые доступно; стоит отметить, что это описание также подходит для 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 (en-US): `auto`
Применяется к	все элементы, `::before` и `::after` псевдоэлементы
Наследуется	нет
Обработка значения	как и у каждого из подсвойств этого свойства: `animation-name`: как указано `animation-duration`: как указано `animation-timing-function`: как указано `animation-delay`: как указано `animation-direction`: как указано `animation-iteration-count`: как указано `animation-fill-mode`: как указано `animation-play-state`: как указано animation-timeline (en-US): listEachItemIdentifyerOrNoneAuto
Animation type	discrete

Синтаксис

/* @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.

Формальный синтаксис

<single-animation># (en-US)где 
<single-animation> = <time> || (en-US) <easing-function> || (en-US) <time> || (en-US) <single-animation-iteration-count> || (en-US) <single-animation-direction> || (en-US) <single-animation-fill-mode> || (en-US) <single-animation-play-state> || (en-US) [ (en-US) none | (en-US) <keyframes-name> ] (en-US)
где 
<easing-function> = linear | (en-US) <cubic-bezier-timing-function> | (en-US) <step-timing-function>
<single-animation-iteration-count> = infinite | (en-US) <number>
<single-animation-direction> = normal | (en-US) reverse | (en-US) alternate | (en-US) alternate-reverse
<single-animation-fill-mode> = none | (en-US) forwards | (en-US) backwards | (en-US) both
<single-animation-play-state> = running | (en-US) paused
<keyframes-name> = <custom-ident> | (en-US) <string> (en-US)
где 
<cubic-bezier-timing-function> = ease | (en-US) ease-in | (en-US) ease-out | (en-US) ease-in-out | (en-US) cubic-bezier(<number [0,1]>, <number>, <number [0,1]>, <number>)
<step-timing-function> = step-start | (en-US) step-end | (en-US) steps(<integer>[ (en-US), <step-position>] (en-US)? (en-US))
где 
<step-position> = jump-start | (en-US) jump-end | (en-US) jump-none | (en-US) jump-both | (en-US) start | (en-US) end

Примеры

Посмотрите примеры CSS-анимаций.

Cylon Eye

Учитывая все специфичные для браузеров префиксы, вот анимация цилиндрического глаза, включающая линейные градиенты и анимацию, которая работает во всех основных браузерах:

<div class="view_port">
  <div class="polling_message">
    Listening for dispatches
  </div>
  <div class="cylon_eye"></div>
</div>

.polling_message {
  color: white;
  float: left;
  margin-right: 2%;
}

.view_port {
  background-color: black;
  height: 25px;
  width: 100%;
  overflow: hidden;
}

.cylon_eye {
  background-color: red;
  background-image: -webkit-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  background-image:    -moz-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  background-image:      -o-linear-gradient(    left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  background-image:         linear-gradient(to right, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
  color: white;
  height: 100%;
  width: 20%;

  -webkit-animation: 4s linear 0s infinite alternate move_eye;
     -moz-animation: 4s linear 0s infinite alternate move_eye;
       -o-animation: 4s linear 0s infinite alternate move_eye;
          animation: 4s linear 0s infinite alternate move_eye;
}

@-webkit-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
   @-moz-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
     @-o-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }
        @keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; }  }

Спецификации

Specification
CSS Animations Level 2 # animation

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Использование CSS-анимации
JavaScript AnimationEvent API