Contenu du cours
Techniques CSS Avancées
Techniques CSS Avancées
Qu'est-ce Que l'Animation ?
Les animations peuvent créer des effets complexes et dynamiques pour améliorer l'expérience interactive de l'utilisateur. Les animations ne nécessitent pas un événement déclencheur spécifique et peuvent être configurées pour se répéter indéfiniment. De plus, les animations peuvent avoir plusieurs états intermédiaires entre les états initial et final, offrant une plus grande flexibilité et un meilleur contrôle sur les effets visuels produits.
Créer une animation
Nous pouvons créer des animations en utilisant la règle @keyframes
, qui définit un ensemble de styles CSS à divers points d'une animation. De plus, nous définissons le nom de l'animation. Il doit être descriptif, c'est-à-dire indiquer quel type d'animation c'est.
Pour déterminer le changement de propriétés à un moment précis, nous pouvons utiliser les mots-clés : from
(0%
) et to
(100%
). Le plus souvent, les valeurs en pourcentage sont utilisées.
Une fois l'animation déclarée, nous pouvons utiliser le nom des keyframes comme valeur pour la propriété animation-name
sur divers éléments. Un autre avantage des animations est qu'elles peuvent être appliquées à plusieurs éléments de manière répétée.
Pratique
Ajoutons une animation à l'élément div
. Notre tâche est de changer la propriété background-color
au fil du temps. L'état initial sera green
, puis à 60%
, nous devons le rendre red
, et dans l'état final, nous avons besoin de blue
. De plus, nous spécifierons la propriété animation-duration
pour remarquer l'animation en action.
index.html
index.css
Merci pour vos commentaires !