This page was translated from English by the community.Learn more and join the MDN Web Docs community.
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> <div></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 distinguishinganimation-name values from other keywords. When parsing, keywords that are valid for properties other thananimation-name whose values were not found earlier in the shorthand must be accepted for those properties rather than foranimation-name. Furthermore, when serializing, default values of other properties must be output in at least the cases necessary to distinguish ananimation-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> <div>Listening for dispatches</div> <div></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