CSS-свойство animation является сокращенным свойством для 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

Синтаксис

Синтаксически свойства задаются по следующему шаблону:

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;
    /* Standard syntax */
    animation: moveit 2s linear 0s infinite alternate;
}

Чтобы анимация запустилась, вы должны указать как минимум два свойства 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 Если указан, связанный элемент принимает вычисленное значение своего свойства animation родительского элемента.

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

Свойство animation поддерживается во всех основных браузерах.

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.