Contenu du cours
Techniques CSS Avancées
Techniques CSS Avancées
2. Positionnement des Éléments
6. Sites Web et Applications Adaptatifs/Réactifs
Défi : Ajouter une Animation
Tâche
Améliorez l'attrait visuel du formulaire d'autorisation en ajoutant une animation au bouton "Log in". Suivez ces étapes :
- Spécifiez la valeur correcte pour la propriété
animation-name
, en utilisant les changements d'état prédéfinis définis dans la règle@keyframes
avec le nomcolorChange
. - Réglez la fonction de temps sur
linear
pour assurer une vitesse constante tout au long de l'animation. - Définissez une durée pour que l'animation dure
6000ms
. - Configurez l'animation pour qu'elle se répète
infinite
fois pour un effet continu.
index.html
index.css
- Assignez le nom de la règle
@keyframes
comme valeur pour la propriétéanimation-name
. - Spécifiez
linear
comme valeur pour la propriétéanimation-timing-function
pour assurer une vitesse constante. - Définissez la propriété
animation-duration
à6000ms
pour déterminer la durée de l'animation. - Utilisez
infinite
comme valeur pour la propriétéanimation-iteration-count
pour répéter l'animation indéfiniment.
index.html
index.css
Tout était clair ?
Merci pour vos commentaires !
Section 4. Chapitre 6