Разница между легкостью перехода CSS3 и легкостью выхода

В чем разница между CSS3 переходов ease-in, ease-outи т.д.?

Переходы и анимация 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 ! Это также полезно для графического сравнения различных временных функций.

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