Изменение времени анимации с помощью ключевых слов
В анимации CSS свойство animation-timing-function определяет, как быстро изменяется анимированный элемент во время анимации. Если анимация - это автомобиль, перемещающийся из точки A в точку B в заданное время (продолжительность animation-duration ), animation-timing-function говорит о том, как автомобиль ускоряется и замедляется в ходе движения. Для популярных опций есть несколько предопределенных ключевых слов. Например, значение по умолчанию - это ease , которая начинается медленно, ускоряется в середине, а затем в конце замедляется. Другие варианты включают ease-out , которое быстро начинается, а затем замедляется, ease-in , что медленно начинается, а затем ускоряется в конце или linear , что накладывает постоянную скорость анимации.
For the elements with id of ball1 and ball2, add an animation-timing-function property to each, and set #ball1 to linear, and #ball2 to ease-out. Notice the difference between how the elements move during the animation but end together, since they share the same animation-duration of 2 seconds.