Свойство Style animation

Определение и использование

анимация Свойство является сокращенной формой шести свойств анимации:

Примечание:Всегда указывайте Свойство animationDurationВ противном случае продолжительность будет равна 0, и анимация никогда не будет воспроизводиться.

Пример

Использование сокращенных свойств для изменения анимации элементов <div>:

document.getElementById("myDIV").style.animation = "mynewmove 4s 2";

Попробуйте сами

Синтаксис

Вернуть свойство анимации:

object.style.animation

Установить свойство анимации:

object.style.animation = "name duration timingFunction delay iterationCount direction fillMode playState"

Значение свойства

Значение Описание
animationName Определяет имя ключевых кадров, которые нужно связать с селектором.
animationDuration Определяет количество секунд или миллисекунд, необходимых для завершения анимации.
animationTimingFunction Определяет кривую скорости анимации.
animationDelay Определяет задержку до начала анимации.
animationIterationCount Определяет, сколько раз должна играть анимация.
animationDirection Определяет, должна ли анимация играть в обратном порядке в альтернативном цикле.
animationFillMode Определяет значение, применяемое за пределами времени выполнения анимации.
animationPlayState Определяет, играет ли анимация или приостанавливается.
initial Установите это свойство в его значение по умолчанию. См. также initial.
inherit Инherits this property from its parent element. См. также inherit.

Технические детали

Значение по умолчанию: none 0 ease 0 1 normal none running
Возвратное значение: Строка, представляющая элемент Свойства анимации.
Версия CSS: CSS3

Поддержка браузерами

анимация Это функция CSS3 (1999).

Все браузеры полностью поддерживают его:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Поддержка Поддержка Поддержка Поддержка Поддержка 11

Связанные страницы

CSS Референс Манифест:Свойства анимации