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

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

index.html

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

index.html

css

index.css

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

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