Свойство animation CSS

  • Предыдущая страница all
  • Следующая страница animation-delay

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

animation Свойство — это сокращение, используемое для установки шести свойств анимации:

Комментарии:Всегда определяйте animation-duration Если свойство не установлено, а продолжительность равна 0, анимация не будет воспроизводиться.

Дополнительная литература:

Учебник по CSS3:Анимация CSS

Руководство по HTML DOM:animation свойство

Пример

Используйте сокращенные свойства, чтобы связать анимацию с элементом div:

div
{
animation:mymove 5s infinite;
}

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

CSS syntax

animation: name duration timing-function delay iteration-count direction;
Значение Описание
animation-name Определяет имя keyframe, которое необходимо связать с селектором.
animation-duration Определяет время, затраченное на завершение анимации, в секундах или миллисекундах.
animation-timing-function Определяет кривую скорости анимации.
animation-delay Определяет задержку до начала анимации.
animation-iteration-count Определяет количество раз, которое должна играть анимация.
animation-direction Определяет, должно ли анимация轮流 в обратном порядке.
animation-fill-mode Определяет значение, применяемое за пределами времени выполнения анимации.
animation-play-state Определяет, играет ли анимация или приостанавливается.

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

Default value: none 0 ease 0 1 normal
Иерархичность: no
Версия: CSS3
JavaScript syntax: object.style.animation="mymove 5s infinite"

Поддержка браузеров

Числа в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.

Числа с префиксами -webkit-, -moz- или -o- указывают на первую версию, в которой используется префiks.

Chrome IE / Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-
  • Предыдущая страница all
  • Следующая страница animation-delay