animation

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

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

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

Начальное значениекак и у каждого из подсвойств этого свойства:
Применяется квсе элементы
Наследуетсянет
Обработка значениякак и у каждого из подсвойств этого свойства:
Animation typeNot 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.

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

animation = 
  <single-animation># (en-US)  

<single-animation> = 
  <time [0s,∞]>                       || (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)
  <linear-easing-function>        | (en-US)
  <cubic-bezier-easing-function>  | (en-US)
  <step-easing-function>          

<single-animation-iteration-count> = 
  infinite        | (en-US)
  <number [0,∞]>  

<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)        

<linear-easing-function> = 
  linear( <linear-stop-list> )  

<cubic-bezier-easing-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-easing-function> = 
  step-start                             | (en-US)
  step-end                               | (en-US)
  steps( <integer> , <step-position>? (en-US) )  

<linear-stop-list> = 
  [ (en-US) <linear-stop> ] (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         

<linear-stop> = 
  <number>               && (en-US)
  <linear-stop-length>? (en-US)  

<linear-stop-length> = 
  <percentage>{1,2} (en-US)

Примеры

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

Cylon Eye

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

html

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

css

.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 1
# animation

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

BCD tables only load in the browser

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