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


113

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


7
Я понимаю, что отвечаю на очень старый комментарий, но я должен указать на пользу всем, кто это читает, что w3schools не является источником стандарта (прочтите w3fools.com ). Правильная ссылка: w3.org/TR/css3-transitions/#transition-timing-function-property
Майкл Лоутон

Ответы:


250

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


1
Красивое описание. Решил мой вопрос.
Ученик
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.