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

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

Les transitions et animations de CSS3 prennent en charge l'assouplissement, officiellement appelé «fonction de synchronisation». Les plus communs sont ease-in, ease-out,ease-in-out , easeet linear, ou vous pouvez spécifier votre propre à l' aide cubic-bezier().

• ease-in va démarrer l'animation lentement et se terminer à pleine vitesse.
• ease-out commencera l'animation à pleine vitesse, puis se terminera lentement.
• ease-in-out commencera lentement, sera le plus rapide au milieu de l'animation, puis se terminera lentement.
• ease est comme ease-in-out , sauf qu'il commence légèrement plus vite qu'il ne se termine.
• linear n'utilise aucun assouplissement.
• Enfin, voici une excellente description de lacubic-bezier syntaxe, mais ce n'est généralement pas nécessaire à moins que vous ne souhaitiez des effets très précis.

Fondamentalement, la détente consiste à ralentir jusqu'à l'arrêt, la détente à accélérer lentement et la linéarité à ne faire ni l'un ni l'autre. Vous pouvez trouver des ressources plus détaillées dans la documentation timing-functionsur MDN .

Et si vous voulez les effets précis mentionnés ci-dessus, l'incroyable Lea Verou's Verou est là pour vous! C'est également utile pour comparer graphiquement les différentes fonctions de chronométrage.

Une autre, la steps()fonction de synchronisation , 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é très utile dans les animations CSS3, plutôt que dans les transitions; un bon exemple est le chargement d'indicateurs avec des points. Traditionnellement, on utilise une série d'images statiques (disons huit points, deux couleurs changeantes à chaque image) pour produire l'illusion du mouvement. Avec une steps(8)animation et une rotatetransformation, vous utilisez le mouvement pour produire l'illusion d'images séparées! C'est amusant.