Css Animation

Можно управлять длительностью анимации, повторением, направлением, типом движения и шагами. Анимировать можно любые элементы, в том числе псевдо-элементы.

Обязательное условие — наличие конкретных значений. Свойства со значением auto не анимируются.

Спецификация: w3.org/TR/css3-animations

Сафари в настоящее время не поддерживает анимацию псевдоэлементов, для просмотра записи воспользуйтесь другими браузерами

Пример Css-анимации:

Пример кода анимации:

@keyframes move {
  40% {
    left: 50%;
    bottom: 75%;
    animation-timing-function: ease-in;
    }
  80% {
    left: 90%;
    bottom: -10em;
    }
}

Подключение анимации:

.sun {
  animation: move 15s infinite linear;
}

move — имя анимации

15s — длительность

infinite — бесконечное повторение

linear — тип движения

@keyframes

Шаги можно задавать через проценты или с помощью ключевых слов from и to. При этом в шагах можно менять тип анимации (animation-timing-function):

Animation-name

Возможные значения: одно или несколько имен анимации. Значение по умолчанию: нет.

animation-name: move; — одна анимация.

animation-name: move, sun-color; — две анимации, имена задаются через запятую.

Animation-duration

Возможные значения: время в секундах (s) или миллисекундах (ms). В случае нескольких анимаций время для каждой из них можно задать через запятую. Исходное значение — 0s.

Animation-timing-function

Возможные значения:

Плавная анимация

ease — скольжение (значение по умолчанию)

linear — ровное движение

ease-in — ускорение к концу

ease-out — ускорение в начале

ease-in-out — более плавное скольжение, чем ease

cubic-bezier(число,число,число,число) позволяет задавать сложный тип анимации. Значения удобно подбирать на cubic-bezier.com.

cubic-bezier(.24,1.49,.29,-0.48);

Пошаговая анимация

step-start и step-end — позволяют задать пошаговую анимацию, обязательно задавать конкретные шаги. При этом с

step-start изменения происходят в начале шага, а с

step-end — в конце.

step-end. Если выставить step-start, счетчик будет начинаться с единиц.

steps(число) — позволяет задать количество шагов, за которые будет выполнена анимация, при этом можно задать только последний шаг без необходимости указывать промежуточные.

steps(60)

Animation-iteration-count

Возможные значения:

число — сколько раз проиграть анимацию. infinite — бесконечное повторение.

Animation-direction

Возможные значения:

normal — анимация проигрывается в обычном направлении, с начала и до конца.

reverse — анимация проигрывается в обратном направлении, то есть с конца.

alternate — анимация проигрывается с начала и до конца, а затем в обратном направлении.

alternate-reverse — анимация проигрывается с конца до начала, а затем в обратном направлении.

Animation-play-state

Возможные значения:

running — анимация проигрывается (значение по умолчанию).

paused — анимация застывает на первом шаге.

Управлять шагом, где будет остановка, не получается, но можно останавливать анимацию по :hover:

Animation-delay

Возможные значения: время в секундах (s) или миллисекундах (ms). Значения могут быть отрицательными. В случае нескольких анимаций время для каждой из них можно задать через запятую. Исходное значение — 0s.

Animation-fill-mode

Возможные значения:

none — анимация воздействует на элемент только во время воспроизведения, по окончании элемент возвращается в исходное состояние.

forwards — анимация воздействует на элемент по окончании воспроизведения.

backwards — анимация воздействует на элемент до начала воспроизведения.

both — анимация воздействует на элемент и до начала, и после окончания воспроизведения.

Чтобы увидеть как backwards и both работают до начала воспроизведения анимации, задана задержка animation-delay: 3s;. Так же для этого имеет смысл открыть пример в новом окне.

Все эти свойства можно записать с помощью короткой записи, например:

animation: timing 5s infinite alternate;

Обязательные значения — имя анимации и длительность. Первое временное значение считается длительностью воспроизведения, второе — задержкой.