Différence entre les transitions CSS3 facilité en entrée et en sortie

Du CSS3 transitions et des animations à l'appui d'assouplissement, officiellement appelé une "fonction de synchronisation". Les plus courantes sont les ease-in, ease-out, ease-in-out, ease, et linear, ou vous pouvez spécifier votre propre en utilisant cubic-bezier().

• ease-in va commencer l'animation lentement, et l'arrivée à pleine vitesse.
• ease-out va commencer l'animation à pleine vitesse, puis terminer lentement.
• ease-in-out va commencer lentement, être le plus rapide dans le milieu de l'animation, puis sur terminer lentement.
• ease est comme ease-in-out, sauf qu'il commence légèrement plus vite que ça se termine.
• linear utilise aucun assouplissement.
• Enfin, voici une description de la cubic-bezier la syntaxe, mais il n'est généralement pas nécessaire, sauf si vous souhaitez que certains des effets très précis.

Fondamentalement, de l'atténuation en sortie est de ralentir à un arrêt, assouplissement est accélérez lentement, et linéaire est de le faire non plus. Vous trouverez de plus amples ressources à la documentation de timing-function sur MDN.

Et si vous ne voulez ladite effets précis, l'incroyable Lea Verou de cubic-bezier.com est là pour vous! Il est également utile pour comparer les différentes fonctions de temporisation sous forme de graphique.

Un autre, le les étapes() fonction de synchronisation, les actes de linear, mais ne réalise qu'un nombre fini d'étapes entre la transition de début et de sa fin. steps() a été le plus utile pour moi dans les animations CSS3, plutôt que dans les transitions; un bon exemple est dans les indicateurs de chargement avec des points. Traditionnellement, on utilise une série d'images statiques (huit points, deux de changer la couleur de chaque image) pour produire l'illusion du mouvement. Avec un steps(8) animation et un rotate transformer, vous êtes en utilisant le mouvement pour produire l'illusion de séparer les trames! Comment s'amuser.