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

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

  1. 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ée colorChange.
  2. Définir la fonction temporelle sur linear afin d'assurer une vitesse constante tout au long de l'animation.
  3. Définir une durée de 6000ms pour l'animation.
  4. Configurer l'animation pour qu'elle se répète un nombre de fois infinite pour un effet continu.
index.html

index.html

index.css

index.css

copy
  1. Attribuer le nom de la règle @keyframes comme valeur de la propriété animation-name.
  2. Spécifier linear comme valeur de la propriété animation-timing-function afin d'assurer une vitesse constante.
  3. Définir la propriété animation-duration à 6000ms pour déterminer la durée de l'animation.
  4. Utiliser infinite comme valeur de 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 : 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 :

  1. 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ée colorChange.
  2. Définir la fonction temporelle sur linear afin d'assurer une vitesse constante tout au long de l'animation.
  3. Définir une durée de 6000ms pour l'animation.
  4. Configurer l'animation pour qu'elle se répète un nombre de fois infinite pour un effet continu.
index.html

index.html

index.css

index.css

copy
  1. Attribuer le nom de la règle @keyframes comme valeur de la propriété animation-name.
  2. Spécifier linear comme valeur de la propriété animation-timing-function afin d'assurer une vitesse constante.
  3. Définir la propriété animation-duration à 6000ms pour déterminer la durée de l'animation.
  4. Utiliser infinite comme valeur de 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