CSS3 переходы и анимации поддерживают замедление, формально называемое «функцией синхронизации». Наиболее распространенными являются ease-in, ease-out, ease-in-out, ease и linear, или вы можете указать свой собственный, используя cubic-bezier().
ease-in медленно запустит анимацию и завершится на полной скорости. ease-out запустит анимацию на полной скорости, затем медленно завершит работу. ease-in-out начнется медленно, будет самым быстрым в середине анимации, затем медленно закончится. ease похоже на ease-in-out, за исключением того, что оно начинается немного быстрее, чем заканчивается. linear не использует ослабление. - Наконец, вот отличное описание синтаксиса
cubic-bezier, но, как правило, в этом нет необходимости, если вы не хотите каких-то очень точных эффектов.
По сути, замедление означает замедление до остановки, замедление - это медленное ускорение, а линейное - ни того, ни другого. Более подробные ресурсы можно найти в документации для timing-function по MDN .
А если вам нужны вышеупомянутые точные эффекты, то удивительная cubic-bezier.com от Lea Verou для вас! Это также полезно для графического сравнения различных функций синхронизации.
Другая, steps() функция синхронизации , действует как linear, но выполняет только конечное число шагов между началом и концом перехода. steps() был наиболее полезен для меня в анимации CSS3, а не в переходах; Хороший пример - загрузка индикаторов с точками. Традиционно для создания иллюзии движения используется серия статических изображений (скажем, восемь точек, по два цвета в каждом кадре). С анимацией steps(8) и преобразованием rotate вы используете движение для создания иллюзии отдельных кадров! Как весело.