Exemples de transition CSS - Comment utiliser l'animation de survol, modifier l'opacité, etc.

Si vous travaillez avec des technologies Web telles que CSS, HTML et JavaScript, il est important d'avoir des connaissances de base sur les animations et les transitions CSS.

Dans cet article, nous allons apprendre à créer des animations de transition de base à l'aide de CSS.

Comment animer un élément avec une transition de base au survol

Dans cet exemple, nous allons modifier l'opacité d'un élément lorsqu'un utilisateur survole ou passe la souris sur l'élément.

      Static Template   .elem { background: blueviolet; width: 300px; height: 150px; } .elem:hover { opacity: 0.5; } 

Il s'agit d'une transition simple qui peut être déclenchée lorsque nous survolons l'élément. Nous pouvons ajouter plus d'une transition qui s'exécutera en même temps.

Ajoutons une propriété de transformation d'échelle pour ajouter une transition d'échelle à l'élément.

 .elem:hover { transform: scale(1.1); }

Mais la transition ne semble pas fluide, car nous n'avons pas défini la durée de la transition ni utilisé de fonction de synchronisation.  

Si nous ajoutons la transitionpropriété, cela rendra l'élément plus fluide.

 .elem { background: blueviolet; width: 300px; height: 150px; margin: 20px auto; transition: 500ms linear; }

Décrivons le fonctionnement de la propriété de transition:

 transition: 500ms linear;
  • 500ms: la durée de la transition en millisecondes
  • linear: la fonction de chronométrage
div { transition:    ; }

Nous pouvons ajouter plus d'options comme ci-dessous (exemples du MDN):

#delay { transition-property: font-size; transition-duration: 4s; transition-delay: 2s; }

Alors, que fait ce code?

  • transition-property: la propriété que vous souhaitez animer. Il peut être un élément CSS comme background, height, translateY, translateXet ainsi de suite.
  • transition-duration: la durée de la transition
  • transition-delay: le délai avant le début de la transition

Vous pouvez en savoir plus sur les différentes utilisations de transitionCSS ici.

Comment rendre les transitions plus interactives à l'aide de la propriété d'animation et des images clés

Nous pouvons faire plus avec les transitions CSS pour rendre cette animation plus créative et interactive.

Comment déplacer un élément avec des images clés

Regardons un exemple où l'élément se déplace du point A au point B. Nous utiliserons translateX et translateY.

      Static Template   .elem { background: orange; width: 300px; height: 150px; animation: moveToRight 2s ease-in-out; animation-delay: 1000ms; } @keyframes moveToRight { 0% { transform: translateX(0px); } 100% { transform: translateX(300px); } } 

Et voici ce que nous obtenons:

Cette fois, nous avons utilisé de nouvelles propriétés comme l'animation et les images clés. Nous avons utilisé la animationpropriété pour définir le nom et la durée de l'animation, et les images clés nous permettent de décrire comment l'élément doit se déplacer.

 animation: moveToRight 2s ease-in-out;

Ici, j'ai nommé l'animation moveToRight- mais vous pouvez utiliser le nom de votre choix. La durée est 2set ease-in-outest une fonction de chronométrage.

Il existe d' autres fonctions de synchronisation que vous pouvez utiliser comme ease-in, linear, ease-outqui font essentiellement le fluide d'animation. Vous pouvez en savoir plus sur les fonctions de chronométrage ici.

@keyframesprend le nom de l'animation. Dans ce cas, c'est moveToRight.

 @keyframes moveToRight { 0% { transform: translateX(0px); } 100% { transform: translateX(300px); } }

keyframesexécutera l'animation en plusieurs étapes. L'exemple ci-dessus utilise un pourcentage pour représenter la plage ou l'ordre des transitions. Nous pourrions également utiliser les méthodes fromet to. comme ci-dessous "

 @keyframes moveToRight { from { transform: translateX(0px); } to { transform: translateX(300px); } }

from représente le point de départ ou la première étape de l'animation.

to est le point final ou la dernière étape de l'animation à exécuter.

Vous voudrez peut-être utiliser un pourcentage dans certains cas. Par exemple, supposons que vous souhaitiez ajouter plus de deux transitions qui seront exécutées dans une séquence, comme suit:

 @keyframes moveToRight { 0% { transform: translateX(0px); } 50% { transform: translateX(150px); } 100% { transform: translateX(300px); } }

Nous pouvons être plus créatifs et animer de nombreuses propriétés en même temps comme dans l'exemple suivant:

Vous pouvez jouer avec les propriétés et les techniques d'animation dans le bac à sable ici:

Ce sont bien d'autres choses que nous pouvons faire avec les images clés. Tout d'abord, ajoutons plus de transitions à notre animation.

Comment animer plus de propriétés et les inclure dans la transition

Cette fois, nous animerons l'arrière-plan et nous ferons bouger l'élément selon un motif carré. Nous allons faire tourner l'animation pour toujours en utilisant la infinitepropriété comme fonction de minutage.

      Static Template   .elem { background: orange; width: 250px; height: 250px; border-radius: 10px; animation: moveToLeft 5s linear infinite; animation-delay: 1000ms; } @keyframes moveToLeft { 0% { transform: translateX(0px); background: linear-gradient( to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100% ); } 25% { transform: translateX(400px); background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); } 50% { transform: translateY(200px) translateX(400px); background: linear-gradient(to top, #30cfd0 0%, #330867 100%); } 75% { transform: translateX(0px) translateY(200px); background: linear-gradient(120deg, #f6d365 0%, #fda085 100%); } 100% { transform: translateY(0px); } } 

Décomposons-le. Nous ajoutons infinited' abord pour que l'animation s'exécute pour toujours.

animation: moveToLeft 5s linear infinite;

Et puis nous avons divisé l'animation en quatre étapes. À chaque étape, nous exécuterons une transition différente et toute l'animation se déroulera dans une séquence.

  • First step: set the element horizontally to translateX(0px), and change the background to the gradient.
 0% { transform: translateX(0px); background: linear-gradient( to right, #ff8177 0%, #ff867a 0%, #ff8c7f 21%, #f99185 52%, #cf556c 78%, #b12a5b 100% ); }
  • The second animation will move the element from the left to the right and change the background color.
 25% { transform: translateX(400px); background: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%); }
  • The third animation will move the element down using translateY and change the background color again.
  • In the fourth step, the element will move back to the left and change the background color.
  • In the fifth animation the element should go back to its original place.

Wrapping up

In this article, we covered various things you can do with CSS transitions. You can use CSS transitions in many ways in your applications to create a better user experience.

Après avoir appris les bases des animations CSS, vous voudrez peut-être aller au-delà et créer des choses plus complexes qui nécessitent une interaction de l'utilisateur. Pour cela, vous pouvez utiliser JavaScript ou toute autre bibliothèque d'animation tierce.

Bonjour, je m'appelle Said Hayani, j'ai créé subscriptioni.io pour aider les créateurs, les blogueurs et les influenceurs à développer leur audience grâce à la newsletter.