Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Qu'est-ce Que l'Animation ? | Animations
Techniques CSS Avancées
course content

Contenu du cours

Techniques CSS Avancées

Techniques CSS Avancées

1. Introduction
2. Positionnement des Éléments
3. Transitions
4. Animations
5. Transformations
6. Sites Web et Applications Adaptatifs/Réactifs
7. Préprocesseurs

book
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.

html

index.html

css

index.css

copy
Que permet de faire la règle `@keyframes` ?

Que permet de faire la règle @keyframes ?

Sélectionnez la réponse correcte

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 1
We're sorry to hear that something went wrong. What happened?
some-alt