Переходы и анимация 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