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 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 |
Совместимость с браузерами
Loading...
Смотрите также
- Использование CSS-анимации
- JavaScript
AnimationEventAPI