Свойства animation-timing-function и animation-delay

В CSS помимо продолжительности анимации можно задать скорость перехода от одного ключевого кадра к другому, а также время задержки перед воспроизведением анимации. Для этого существуют два свойства – animation-timing-function и animation-delay. Разберем их по порядку.

Свойство animation-timing-function

С помощью свойства animation-timing-function можно управлять как скоростью всей анимации, так и скоростью смены значений свойств между ключевыми кадрами анимации. Принцип работы свойства аналогичен свойству transition-timing-function, которое мы не так давно рассматривали.

В качестве значений принимаются те же самые ключевые слова и функции – ease, ease-in, cubic-bezier() и так далее. Мы не будем повторяться – список значений и их описание вы можете найти в уроке по transition-timing-function. Они полностью совместимы со свойством animation-timing-function. Там же объясняется тонкая разница между длительностью и скоростью анимации.

Чтобы задать функцию распределения скорости для всей анимации в целом, просто добавьте еще одну строку кода к вашему общему стилю для анимированного элемента:

.traffic-light {
    animation-name: changeBackgroundColor;
    animation-duration: 6s;
    animation-timing-function: ease;
}

Если же вы хотите установить разные значения animation-timing-function для каждого ключевого кадра анимации, тогда следует указать их в правиле @keyframes. Вернемся к нашему примеру: допустим, мы хотим, чтобы при переходе от первого ключевого кадра ко второму использовалась функция ease-in, а при переходе от второго кадра к третьему – функция ease-out. Запись будет выглядеть следующим образом:

@keyframes changeBackgroundColor {
    from {
        background-color: red;
        animation-timing-function: ease-in;
    }
    50% {
        background-color: yellow;
        transform: translateY(50px);
        animation-timing-function: ease-out;
    }
    to {
        background-color: green;
        transform: translateY(100px);
    }
}

Свойство animation-delay

Данное свойство аналогично свойству transition-delay. С помощью него можно отложить начало выполнения анимации, указав в качестве значения время в секундах либо миллисекундах:

.traffic-light {
        animation-name: changeBackgroundColor;
        animation-duration: 6s;
        animation-delay: 2s;
}

Оба рассмотренных здесь свойства нуждаются в указании префиксов производителей для обеспечения максимальной кроссбраузерности. Впрочем, как уже неоднократно говорилось, префиксы необходимо добавлять ко всем свойствам CSS-анимации.

Далее в учебнике: свойство animation-iteration-count для управления повтором анимации.