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 поддерживается во всех основных браузерах.

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

Похожие посты

CSS-свойство clip

Определяет координаты области, которая будет кадрирована, т.е. содержимое за пределом этой области будет отрезано

CSS-свойство bottom

Задает смещение или отступ от нижнего края элемента

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

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

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

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