Différence entre la facilité d'intégration 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, formellement appelé "fonction de minutage". Les plus courants sont ease-in, ease-out, ease-in-out, ease et linear, ou vous pouvez spécifier le vôtre à l'aide de la fonction cubic-bezier().

• ease-in Démarrera l'animation lentement et se terminera à toute vitesse.
• ease-out Démarrera l'animation à toute vitesse, puis se terminera lentement.
• ease-in-out Démarrera lentement, soyez le plus rapide au milieu de l'animation, puis terminez lentement.
• ease ressemble à ease-in-out, sauf qu'il commence un peu plus vite qu'il ne se termine.
• linear n'utilise pas d'accélération.
• Enfin, voici une bonne description de la syntaxe cubic-bezier, Mais ce n'est généralement pas nécessaire à moins que vous ne vouliez des effets très précis.

Fondamentalement, l’atténuation consiste à ralentir jusqu’à s’arrêter, l’accélération à l’accélération, et linéaire à ne faire aucun des deux. Vous pouvez trouver des ressources plus détaillées sur le documentation de timing-function Sur MDN .

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

Un autre, la fonction steps() 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 couleurs changeantes chaque image) pour produire l'illusion de mouvement. Avec une animation steps(8) et une transformation rotate, vous utilisez motion pour créer l’illusion d’images séparées! C'est amusant.