animation
CSS свойство animation
это короткая запись для animation-name
, animation-duration
, animation-timing-function
, animation-delay
, animation-iteration-count
, animation-direction
, animation-fill-mode
и animation-play-state
.
Интерактивный пример
Описание того, какие свойства являются анимируемые доступно; стоит отметить, что это описание также подходит для CSS переходов.
Начальное значение | как и у каждого из подсвойств этого свойства:
|
---|---|
Применяется к | все элементы, ::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;
Порядок важен в каждом определении анимации: первое значение, которое может быть проанализировано как <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