Разница между переходом CSS3-переходов и простотой

Ответ 1

Переходы 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.

И если вы действительно хотите получить вышеупомянутые точные эффекты, вам поразится удивительная Lea Verous cubic-bezier.com! Его также полезно для графического сравнения различных функций синхронизации.

Другая функция steps() синхронизации действует как linear, но выполняет только конечное число шагов между началом перехода и его окончанием. steps() был наиболее полезен для меня в анимациях CSS3, а не в переходах; хорошим примером является загрузка индикаторов с точками. Традиционно используется серия статических изображений (например, восемь точек, два изменяющих цвет каждого кадра), чтобы создать иллюзию движения. С анимацией steps(8) и преобразованием rotate вы используете движение для создания иллюзии отдельных кадров! Как весело.