animation
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since сентябрь 2015 г..
* Some parts of this feature may have varying levels of support.
CSS свойство animation это короткая запись для animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode и animation-play-state.
Интерактивный пример
animation: 3s ease-in 1s infinite reverse both running slidein; animation: 3s linear 1s infinite running slidein; animation: 3s linear 1s infinite alternate slidein; animation: 0.5s linear 1s infinite alternate slidein; <section class="flex-column" id="default-example"> <div id="example-element"></div> </section> #example-element { background-color: #1766aa; margin: 20px; border: 5px solid #333; width: 150px; height: 150px; border-radius: 50%; } @keyframes slidein { from { margin-left: -20%; } to { margin-left: 100%; } } Описание того, какие свойства являются анимируемые доступно; стоит отметить, что это описание также подходит для 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> =
<'animation-duration'> ||
<easing-function> ||
<'animation-delay'> ||
<single-animation-iteration-count> ||
<single-animation-direction> ||
<single-animation-fill-mode> ||
<single-animation-play-state> ||
[ none | <keyframes-name> ] ||
<single-animation-timeline>
<animation-duration> =
[ auto | <time [0s,∞]> ]#
<easing-function> =
<linear-easing-function> |
<cubic-bezier-easing-function> |
<step-easing-function>
<animation-delay> =
<time>#
<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>
<single-animation-timeline> =
auto |
none |
<dashed-ident> |
<scroll()> |
<view()>
<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()>
<scroll()> =
scroll( [ <scroller> || <axis> ]? )
<view()> =
view( [ <axis> || <'view-timeline-inset'> ]? )
<linear()> =
linear( [ <number> && <percentage>{0,2} ]# )
<cubic-bezier()> =
cubic-bezier( [ <number [0,1]> , <number> ]#{2} )
<steps()> =
steps( <integer> , <step-position>? )
<scroller> =
root |
nearest |
self
<axis> =
block |
inline |
x |
y
<view-timeline-inset> =
[ [ auto | <length-percentage> ]{1,2} ]#
<step-position> =
jump-start |
jump-end |
jump-none |
jump-both |
start |
end
<length-percentage> =
<length> |
<percentage>
Примеры
Посмотрите примеры 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 |
Совместимость с браузерами
Смотрите также
- Использование CSS-анимации
- JavaScript
AnimationEventAPI