Transitions CSS expliquées

Le moyen le plus simple (et le plus direct) d'animer vos composants consiste à utiliser les transitions CSS. Dans cet article, vous apprendrez comment fonctionnent les transitions CSS et comment créer des animations avec.

Une transition se produit lorsqu'une propriété CSS passe d'une valeur à une autre valeur sur une période donnée.

Vous pouvez créer des transitions CSS avec la transitionpropriété:

.selector { transition: property duration transition-timing-function delay; }

La transitionpropriété est un raccourci de quatre propriétés CSS, transition-property, transition-duration, transition-timing-function, transition-delay.

.selector { transition-property: property; transition-duration: duration; transition-timing-function: timing-function; transition-delay: delay /* The transition property is the shorthand for the above four properties */ transition: property duration timing-function delay; }

transition-propertyfait référence à la propriété CSS que vous souhaitez effectuer la transition. Il est requis en transitionsténographie.

transition-durationfait référence à la durée de la transition. Combien de temps voulez-vous que la transition dure? Cette valeur est écrite en secondes avec le ssuffixe (like 3s). Il est également requis en transitionsténographie.

transition-timing-functionfait référence à la façon dont la transition se produit. Vous en apprendrez plus à ce sujet plus tard.

transition-delayfait référence au temps que vous souhaitez attendre avant de commencer la durée. Cette valeur est écrite en secondes avec le ssuffixe (like 3s). transition-delayest facultatif dans la transitionsténographie.

Déclencher des transitions

Vous pouvez déclencher des transitions CSS directement avec des pseudo-classes telles que :hover(s'active lorsque la souris passe sur un élément), :focus(s'active lorsqu'un utilisateur clique sur un élément, ou lorsqu'un utilisateur clique sur un élément d'entrée), ou :active(s'active lorsque l'utilisateur clique sur l'élément ).

/* creating transitions directly in CSS */ .button { background-color: #33ae74; transition: background-color 0.5s ease-out; } .button:hover { background-color: #1ce; }

Vous pouvez également déclencher des transitions CSS via JavaScript en ajoutant ou en supprimant une classe.

/* CSS */ .button { background-color: #33ae74; transition: background-color 0.5s ease-out; } .button.is-active { color: #1ce; } // JavaScript const button = document.querySelector('.button') button.addEventListener('click', _ => button.classList.toggle('is-active'))

Comprendre la fonction de synchronisation de transition

Le transition-timing-functionrégit comment une transition se produit. Toutes les transitions ont une valeur linearpar défaut, ce qui signifie que la propriété change uniformément jusqu'à la fin de la transition.

.selector { transition: transform 1s linear; /* OR */ transition-property: transform; transition-duration: 1s; transition-timing-function: linear; }

Le fait est que peu de choses bougent linéairement dans la vie. Ce n'est pas ainsi que les objets réels bougent. Parfois, nous accélérons; parfois, nous décélérons. Le transition-timing-functionvous permet de capturer tout cela.

Imaginez-vous lancer une balle de tennis dans un champ ouvert. La balle quitte votre main avec la vitesse maximale. En se déplaçant, il perd de l'énergie, il ralentit et finit par s'arrêter. Cela s'appelle ease-out. Il y a une fonction de synchronisation pour cela.

.selector { transition-timing-function: ease-out; }

Imaginez maintenant que vous êtes dans une voiture. Cela ne bouge pas pour le moment. Lorsque vous déplacez la voiture, elle accélère et va vers sa vitesse maximale. Cela s'appelle ease-in. Il y a aussi une fonction de synchronisation pour cela.

.selector { transition-timing-function: ease-in; }

Puisque vous avez ease-inet ease-out, il y a aussi une fonction de synchronisation qui combine les deux ensemble, ease-in-out. (Je vous déconseille d'utiliser ease-in-outdans vos transitions à moins que vos transitions ne durent plus d'une seconde. Rien ne peut entrer et sortir en une seconde. Cela semble tout simplement bizarre.)

.selector { transition-timing-function: ease-in-out; }

Voir ce stylo pour une démonstration des fonctions de chronométrage que vous avez apprises jusqu'à présent:

Enfin, si vous n'aimez aucun des choix ci-dessus, vous pouvez créer votre propre fonction de chronométrage avec cubic-bezier.

Créer votre propre fonction de chronométrage avec cubic-bezier

Un Cubic-bezier est un ensemble de quatre valeurs qui déterminent votre fonction de synchronisation de transition. Cela ressemble à ceci:

.selector { transition-timing-function: cubic-bezier(x1, y1, x2, y2); }

Ne vous inquiétez pas du x1, y1,, x2et y2. Vous ne créerez jamais de courbes cubiques-bezier en écrivant vous-même des nombres (à moins que vous ne sachiez déjà ce qu'ils signifient et que vous peaufinez votre fonction de synchronisation pour la perfection).

Vous pouvez compter sur les outils de développement fiables de Chrome et de Firefox pour vous aider à créer vos courbes. Pour l'utiliser, vous ajoutez un transition-timing-functiondans un élément, puis ouvrez devtools et cliquez sur la fonction de synchronisation.

Voir les fonctions de synchronisation de la transition CSS du stylet par Zell Liew (@zellwk) sur CodePen.

Aller en profondeur sur la création de vos propres courbes de Bézier pour vos animations est hors de propos pour l'article d'aujourd'hui. Si vous êtes intéressé, vous pouvez trouver plus d'informations sur les courbes cubic-bezier dans «Understanding CSS Timing Functions» de Stephen Greig.

Transition de deux propriétés ou plus

Vous pouvez effectuer la transition de deux (ou plus) propriétés CSS en les séparant par une virgule dans votre propriété transitionou transition-property.

Vous pouvez faire la même chose avec la durée, les fonctions de synchronisation et les retards. Si les valeurs sont identiques, il vous suffit d'en spécifier une.

.selector { transition: background-color 1s ease-out, color 1s ease-out; /* OR */ transition-property: background, color; transition-duration: 1s; transition-timing-function: ease-out; }

Vous pourriez être tenté de faire la transition de chaque propriété CSS avec all. Ne fais jamais ça. C'est mauvais pour les performances. Spécifiez toujours la propriété que vous essayez de faire la transition.

/* DON'T EVER DO THIS */ .selector { transition-property: all; } /* ALWAYS DO THIS */ .selector { transition-property: background-color, color, transform; }

Transition vers l'intérieur vs transition vers l'extérieur

Parfois, vous voulez que les propriétés entrent et sortent différemment. Vous voulez que la durée, la fonction de synchronisation ou le délai soient différents.

Pour ce faire, vous écrivez un autre ensemble de transition-propriétés.

.button { background-color: #33ae74; transition: background-color 0.5s ease-out; } .button:hover { background-color: #1ce; transition-duration: 2s; }

When you write transition properties in the triggering (pseudo) class, the transition properties in the triggering class overwrites the original transition properties you’ve stated in the base class.

So, in the example above, when you hover on the button, the background color takes 2 seconds to change from #33ae74 to #1ce.

When you hover out from the button, the background color only takes 0.5s to change back to #1ce because the transition-duration of 2s no longer exists.

Wrapping up

CSS Transitions are the easiest way to perform animations. You can create transitions either with the transition shorthand or with transition- properties.

To create a transition, you overwrite a property in a class (or psuedo class), and you specify the property to transit in transition or transition-property.

Remember to change your transition-timing-function so your animation looks more real!

If you loved this article, you’ll love learn Learn JavaScript — a course that helps you learn to build real components from scratch with JavaScript.

(Oh, by the way, if you liked this article, I’d appreciate it if you could share it. )

Originally published at zellwk.com.