Défi : Implémenter une Animation CSS
Tâche
Améliorer l'apparence visuelle du formulaire d'autorisation en ajoutant une animation au bouton « Se connecter ». Suivre les étapes suivantes :
- Indiquer la valeur correcte pour la propriété
animation-name
, en utilisant les changements d'état prédéfinis dans la règle@keyframes
nomméecolorChange
. - Définir la fonction temporelle sur
linear
afin d'assurer une vitesse constante tout au long de l'animation. - Définir une durée de
6000ms
pour l'animation. - Configurer l'animation pour qu'elle se répète un nombre de fois
infinite
pour un effet continu.
index.html
index.css
- Attribuer le nom de la règle
@keyframes
comme valeur de la propriétéanimation-name
. - Spécifier
linear
comme valeur de la propriétéanimation-timing-function
afin d'assurer une vitesse constante. - Définir la propriété
animation-duration
à6000ms
pour déterminer la durée de l'animation. - Utiliser
infinite
comme valeur de 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
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Awesome!
Completion rate improved to 2.04
Défi : Implémenter une Animation CSS
Glissez pour afficher le menu
Tâche
Améliorer l'apparence visuelle du formulaire d'autorisation en ajoutant une animation au bouton « Se connecter ». Suivre les étapes suivantes :
- Indiquer la valeur correcte pour la propriété
animation-name
, en utilisant les changements d'état prédéfinis dans la règle@keyframes
nomméecolorChange
. - Définir la fonction temporelle sur
linear
afin d'assurer une vitesse constante tout au long de l'animation. - Définir une durée de
6000ms
pour l'animation. - Configurer l'animation pour qu'elle se répète un nombre de fois
infinite
pour un effet continu.
index.html
index.css
- Attribuer le nom de la règle
@keyframes
comme valeur de la propriétéanimation-name
. - Spécifier
linear
comme valeur de la propriétéanimation-timing-function
afin d'assurer une vitesse constante. - Définir la propriété
animation-duration
à6000ms
pour déterminer la durée de l'animation. - Utiliser
infinite
comme valeur de 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