Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Défi : Ajouter une Animation | Animations
Techniques CSS Avancées

bookDé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 :

  1. 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 nom colorChange.
  2. Réglez la fonction de temps sur linear pour assurer une vitesse constante tout au long de l'animation.
  3. Définissez une durée pour que l'animation dure 6000ms.
  4. Configurez l'animation pour qu'elle se répète infinite fois pour un effet continu.
index.html

index.html

index.css

index.css

copy
  1. Assignez le nom de la règle @keyframes comme valeur pour la propriété animation-name.
  2. Spécifiez linear comme valeur pour la propriété animation-timing-function pour assurer une vitesse constante.
  3. Définissez la propriété animation-duration à 6000ms pour déterminer la durée de l'animation.
  4. Utilisez infinite comme valeur pour la propriété animation-iteration-count pour répéter l'animation indéfiniment.
index.html

index.html

index.css

index.css

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 6

Demandez à l'IA

expand

Demandez à l'IA

ChatGPT

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

bookDéfi : Ajouter une Animation

Glissez pour afficher le menu

Tâche

Améliorez l'attrait visuel du formulaire d'autorisation en ajoutant une animation au bouton "Log in". Suivez ces étapes :

  1. 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 nom colorChange.
  2. Réglez la fonction de temps sur linear pour assurer une vitesse constante tout au long de l'animation.
  3. Définissez une durée pour que l'animation dure 6000ms.
  4. Configurez l'animation pour qu'elle se répète infinite fois pour un effet continu.
index.html

index.html

index.css

index.css

copy
  1. Assignez le nom de la règle @keyframes comme valeur pour la propriété animation-name.
  2. Spécifiez linear comme valeur pour la propriété animation-timing-function pour assurer une vitesse constante.
  3. Définissez la propriété animation-duration à 6000ms pour déterminer la durée de l'animation.
  4. Utilisez infinite comme valeur pour la propriété animation-iteration-count pour répéter l'animation indéfiniment.
index.html

index.html

index.css

index.css

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 4. Chapitre 6
some-alt