Animations en CSS

Les animations CSS sont un moyen d'ajouter du mouvement et de l'interactivité aux éléments d'une page Web. Avec eux, vous pouvez créer des effets visuels incroyables et donner vie à des éléments de mise en page statiques.

Propriétés CSS pour les animations

Pour créer des animations en CSS, vous devez utiliser certaines propriétés spécifiques. Les principaux sont :

  • @keyframes : définit l'animation elle-même, en spécifiant les états initial et final des éléments ;
  • animation-name : définit le nom de l'animation ;
  • animation-duration : définit la durée de l'animation ;
  • animation-timing-function : définit le type d'animation, tel que linéaire, easy-in, easy-out, easy-in-out, entre autres ;
  • animation-delay : définit le délai avant le démarrage de l'animation ;
  • animation-iteration-count : définit le nombre de fois que l'animation sera jouée ;
  • animation-direction : définit la direction de l'animation, telle que normale, inversée, alternée, alternée-inversée, entre autres.

Exemple d'animation CSS

Créons un exemple d'animation CSS simple pour mieux comprendre son fonctionnement :

/* Définition de l'animation */ @keyframes déplacer { 0% { transformer : translateX(0); } 50 % { transformer : translateX(50px); } 100 % { transformer : translateX(0); } } /* Application de l'animation */ .élément { nom-animation : déplacer ; durée de l'animation : 2 s ; fonction de synchronisation d'animation : entrée et sortie faciles ; nombre d'itérations d'animation : infini ; }

Dans cet exemple, nous créons une animation appelée "move" qui provoque le déplacement d'un élément vers la droite et son retour à sa position de départ. Pour cela, nous utilisons la propriété transform: translateX() pour modifier la position horizontale de l'élément.

Nous appliquons ensuite l'animation à l'élément à l'aide des propriétés animation-name, animation-duration, animation-timing-function et animation-iteration-count.

Conclusion

Les animations CSS sont un excellent moyen d'ajouter de l'interactivité et du dynamisme aux pages Web. Avec les bonnes propriétés et un peu de créativité, vous pouvez créer des effets étonnants qui vous épateront.

Répondez maintenant à l’exercice sur le contenu :

_Quelle est la propriété CSS qui définit la durée de l'animation ?

Tu as raison! Félicitations, passez maintenant à la page suivante

Vous avez raté! Essayer à nouveau.

Image de l'article Transitions en CSS

Page suivante de lebook gratuit :

26Transitions en CSS

3 minutes

Obtenez votre certificat pour ce cours gratuitement ! en téléchargeant lapplication Cursa et en lisant lebook qui sy trouve. Disponible sur Google Play ou App Store !

Get it on Google Play Get it on App Store

+ 6,5 millions
d'étudiants

Certificat gratuit et
valide avec QR Code

48 mille exercices
gratuits

Note de 4,8/5 dans les
magasins d'applications

Cours gratuits en
vidéo, audio et texte