Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.
Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.
Описание
CSS свойство animation
это короткая запись для animation-name
, animation-duration
, animation-timing-function
, animation-delay
, animation-iteration-count
, animation-direction
, animation-fill-mode
и animation-play-state
.
A description of which properties are animatable is available; it's worth noting that this description is also valid for CSS transitions.
Начальное значение | как и у каждого из подсвойств этого свойства:
|
---|---|
Применяется к | все элементы, ::before и ::after псевдоэлементы |
Наследуется | нет |
Отображение | визуальный |
Обработка значения | как и у каждого из подсвойств этого свойства:
|
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;
The order is important within each animation definition: the first value that can be parsed as a <time>
is assigned to the animation-duration
, and the second one is assigned to 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>#где
<single-animation> = <time> || <single-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || <single-animation-name>
где
<single-timing-function> = <single-transition-timing-function>
<single-animation-iteration-count> = infinite | <number>
<single-animation-direction> = normal | reverse | alternate | alternate-reverse
<single-animation-fill-mode> = none | forwards | backwards | both
<single-animation-play-state> = running | paused
<single-animation-name> = none | IDENTгде
<single-transition-timing-function> = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)
Примеры
Посмотрите примеры CSS анимаций.
Cylon Eye
Considering all browser-specific prefixes, here is a cylon eye animation incorporating linear gradients and animations that works across all major browsers:
<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 | Status | Comment |
---|---|---|
CSS Animations Определение 'animation' в этой спецификации. |
Рабочий черновик | Изначальное определение |
Совместимость с браузерами
Feature | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
---|---|---|---|---|---|
Basic support | (Да)-webkit 43.0 |
5.0 (5.0)-moz 16.0 (16.0) |
10 | 12-o 12.10[2] |
4.0-webkit |
Feature | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|
Basic support | 2.1 -webkit [1] 4.0 -webkit |
5.0 (5.0)-moz 16.0 (16.0) |
? | ? | (Да)-webkit |
[1] Частичная поддержка: animation-fill-mode
свойство не поддерживается в браузере Android версии ниже 2.3.
[2] Смотрите примечания к выпуску Opera 12.50.