Animations CSS
Page 25 | Écouter en audio
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.
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 !
