English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Атрибут animation CSS является сокращенной записью следующих атрибутовanimation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-modeиanimation-play-state.
В таблице ниже приведены контексты использования и история версий этого атрибута.
| Значение по умолчанию: | none 0 ease 0 1 normal none running; |
|---|---|
| Доступно для: | Все элементы::before и::after Псевдоэлементы |
| Ингерит: | Нет |
| Анимируемые: | Нет.См. также Атрибут анимации. |
| Версия: | Новая функция CSS3 |
| Язык JavaScript: | object.style.animation="mymove 5s infinite" |
Грамматика этого атрибута такая:
animation: [ name duration timing-function delay iteration-count direction fill-mode play-state ] | initial | inherit
Ниже приведен пример того, как использовать атрибут animation.
.box {
width: 50px;
height: 50px;
background: red;
position: relative;
/* Chrome, Safari, Opera */
-webkit-animation: moveit 2s linear 0s infinite alternate;
animation: moveit 2s linear 0s infinite alternate;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes moveit {
from {left: 0;}
to {left: 50%;}
}
@keyframes moveit {
from {left: 0;}
to {left: 50%;}
}Проверьте, посмотрите ›/‹Примечание:Необходимо указать по крайней мере два свойства animation-name и animation-duration (больше 0), чтобы анимация произошла.
В таблице ниже описаны значения этого свойства.
| Значение | Описание |
|---|---|
| animation-name | Определить имя анимации, которое должно применяться к выбранному элементу с помощью определения @keyframes. |
| animation-duration | Определить количество секунд или миллисекунд, которое необходимо для выполнения анимации одного цикла. |
| animation-timing-function | Определить, как анимация должна выполняться в течение каждого цикла, то есть функцию сглаживания. |
| animation-delay | Определить задержку до начала анимации. |
| animation-iteration-count | Определить, сколько раз анимация должна играть до остановки. |
| animation-direction | Определить, должна ли анимация играть в обратном направлении в альтернативных циклах. |
| animation-fill-mode | Определить, как样式 должны применяться к целевому элементу CSS анимации до и после выполнения. |
| animation-play-state | Определить, должна ли анимация запускаться или останавливаться. |
| initial | Установить этот свойство по умолчанию. |
| inherit | Если указано, то связанный элемент использует вычисленное значение свойства анимации родительского элемента. |
Совместимость браузеров для свойств анимации, все основные браузеры поддерживают этот свойство. Числа представляют собой номер первой версии браузера, которая поддерживает этот свойство.
|
Узнайте больше из следующих руководств:CSS3 анимации.
Связанные свойства и правила:animation-name,animation-duration,animation-timing-function,animation-delay,animation-iteration-count,animation-direction,animation-fill-mode,animation-play-state,@keyframes.