animation
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.
CSS свойство animation
это короткая запись для animation-name
, animation-duration
, animation-timing-function
, animation-delay
, animation-iteration-count
, animation-direction
, animation-fill-mode
и animation-play-state
.
Интерактивный пример
Описание того, какие свойства являются анимируемые доступно; стоит отметить, что это описание также подходит для CSS переходов.
Начальное значение | как и у каждого из подсвойств этого свойства:
|
---|---|
Применяется к | все элементы |
Наследуется | нет |
Обработка значения | как и у каждого из подсвойств этого свойства:
|
Animation type | Not animatable |
Синтаксис
/* @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>#
<single-animation> =
<time [0s,∞]> ||
<easing-function> ||
<time> ||
<single-animation-iteration-count> ||
<single-animation-direction> ||
<single-animation-fill-mode> ||
<single-animation-play-state> ||
[ none | <keyframes-name> ]
<easing-function> =
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>
<single-animation-iteration-count> =
infinite |
<number [0,∞]>
<single-animation-direction> =
normal |
reverse |
alternate |
alternate-reverse
<single-animation-fill-mode> =
none |
forwards |
backwards |
both
<single-animation-play-state> =
running |
paused
<keyframes-name> =
<custom-ident> |
<string>
<linear-easing-function> =
linear |
<linear()>
<cubic-bezier-easing-function> =
ease |
ease-in |
ease-out |
ease-in-out |
<cubic-bezier()>
<step-easing-function> =
step-start |
step-end |
<steps()>
<linear()> =
linear( [ <number> && <percentage>{0,2} ]# )
<cubic-bezier()> =
cubic-bezier( [ <number [0,1]> , <number> ]#{2} )
<steps()> =
steps( <integer> , <step-position>? )
<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
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 1 # animation |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Использование CSS-анимации
- JavaScript
AnimationEvent
API