Différence entre la facilité d'entrée et la facilité de sortie des transitions CSS3

Question

Quelle est la différence entre les transitions CSS3 ? ease-in , ease-out etc.

Answer 1

Les transitions et les animations de CSS3 prennent en charge l'assouplissement, appelé officiellement "fonction de temporisation". Les fonctions les plus courantes sont ease-in , ease-out , ease-in-out , ease y linear ou vous pouvez spécifier le vôtre en utilisant cubic-bezier() .

• ease-in commencera l'animation lentement, et la terminera à pleine vitesse.
• ease-out démarrera l'animation à pleine vitesse, puis la terminera lentement.
• ease-in-out commencera lentement, sera le plus rapide au milieu de l'animation, puis finira lentement.
• ease c'est comme ease-in-out sauf qu'il commence un peu plus vite qu'il ne finit.
• linear n'utilise aucun assouplissement.
• Enfin, Voici une excellente description de la cubic-bezier syntaxe, mais ce n'est généralement pas nécessaire, sauf si vous souhaitez obtenir des effets très précis.

Fondamentalement, le relâchement consiste à ralentir jusqu'à l'arrêt, le relâchement consiste à accélérer lentement, et la linéarité consiste à ne faire ni l'un ni l'autre. Vous trouverez des ressources plus détaillées sur le site la documentation pour timing-function sur MDN .

Et si vous souhaitez obtenir les effets précis susmentionnés, l'étonnant ouvrage de Léa Verou, intitulé cubic-bezier.com est là pour vous ! Il est également utile pour comparer graphiquement les différentes fonctions de chronométrage.

Un autre, le site steps() fonction de chronométrage agit comme linear mais n'effectue qu'un nombre fini d'étapes entre le début et la fin de la transition. steps() m'a été le plus utile dans les animations CSS3, plutôt que dans les transitions ; un bon exemple est le chargement des indicateurs avec des points. Traditionnellement, on utilise une série d'images statiques (disons huit points, deux changeant de couleur à chaque image) pour produire l'illusion du mouvement. Avec une steps(8) et une rotate transformer, vous utilisez le mouvement pour produire l'illusion d'images séparées ! Comme c'est amusant.