animation

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

Описание того, какие свойства являются анимируемые (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

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