Длительность анимации

animation-duration

Задается в единицах времени (s, ms)

Скорость анимации

animation-timing-function

Определяет функцию изменения скорости анимации, задается ключевым словом или уравнением кривой Безье.

easeбыстрое начало, замедление к концу
cubic-bezier(0.25,0.1,0.25,1)
linearравномерная скорость
cubic-bezier(0,0,1,1)
ease-inмедленное начало, плавное ускорение
cubic-bezier(0.42,0,1,1)
ease-outбыстрое начало, плавное замедление
cubic-bezier(0,0,0.58,1)
ease-in-outмедленно начинается, медленно заканчивается
cubic-bezier(0.42,0,0.58,1)
cubic-bezier(x1, y1, x2, y2)ручное задание кривой Безье
steps(количество шагов, start|end)определяет количество шагов на которое разбивается анимация и момент ее начала (в начале или в конце каждого шага), по умолчанию — end
step-startэквивалентно steps(1, start)
step-endэквивалентно steps(1, end)

Задержка до начала анимации

animation-delay

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

Повтор анимации

animation-iteration-count

Целое число или ключевое слово infinite.

Направление анимации

animation-direction
alternateс начала до конца и обратно
alternate-reverseс конца до начала и обратно
normalс начала до конца
reverseс конца до начала

Остановка и запуск анимации

animation-play-state

Может использоваться в скриптах для остановки (paused) и проигрывания (running) анимации.

Состояние элемента до и после выполнения анимации

animation-fill-mode

Определяет в каком состоянии будет находиться элемент до и после проигрывания анимации.

noneсостояние не изменяется
forwardsсостояние последнего кадра
backwardsсостояние первого кадра
bothсостояние первого кадра до начала анимации, состояние последнего кадра до конца последней анимации

Множественные анимации на одном элементе

Значения для разных анимаций записываются через запятую.

Краткий синтаксис

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

Похожие статьи

0 комментариев

Оставить комментарий

*Доступные HTML-теги: a, abbr, blockquote, code, pre, del, i, em, strong, b, strike
*Не будет опубликован