Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Apprendre Défi : Ajout de Transition | Transitions
Techniques CSS Avancées

bookDéfi : Ajout de Transition

Tâche

Améliorez l'expérience visuelle de l'élément div avec le nom de classe box en ajoutant un effet de transition fluide à ses changements au survol. Suivez ces étapes :

  1. Spécifiez la valeur correcte pour la propriété transition-property.
  2. Réglez la durée de la transition pour qu'elle dure 3000ms.
  3. Assurez-vous que la transition commence 200ms après qu'un utilisateur survole l'élément.
  4. Appliquez la fonction temporelle cubic-bezier(0.165, 0.84, 0.44, 1) pour contrôler l'accélération et la décélération de la transition.
index.html

index.html

index.css

index.css

copy
  1. Définissez la propriété transition-property à la valeur appropriée qui correspond aux changements que vous souhaitez animer au survol.
  2. Spécifiez la transition-duration pour contrôler la durée de la transition (dans ce cas, 3000ms).
  3. Utilisez la propriété transition-delay pour introduire un délai avant que la transition ne commence après qu'un utilisateur ait survolé l'élément (réglez-la sur 200ms).
  4. Appliquez la fonction de temporisation cubic-bezier(0.165, 0.84, 0.44, 1) pour affiner l'accélération et la décélération de la transition.
index.html

index.html

index.css

index.css

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 7

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

bookDéfi : Ajout de Transition

Tâche

Améliorez l'expérience visuelle de l'élément div avec le nom de classe box en ajoutant un effet de transition fluide à ses changements au survol. Suivez ces étapes :

  1. Spécifiez la valeur correcte pour la propriété transition-property.
  2. Réglez la durée de la transition pour qu'elle dure 3000ms.
  3. Assurez-vous que la transition commence 200ms après qu'un utilisateur survole l'élément.
  4. Appliquez la fonction temporelle cubic-bezier(0.165, 0.84, 0.44, 1) pour contrôler l'accélération et la décélération de la transition.
index.html

index.html

index.css

index.css

copy
  1. Définissez la propriété transition-property à la valeur appropriée qui correspond aux changements que vous souhaitez animer au survol.
  2. Spécifiez la transition-duration pour contrôler la durée de la transition (dans ce cas, 3000ms).
  3. Utilisez la propriété transition-delay pour introduire un délai avant que la transition ne commence après qu'un utilisateur ait survolé l'élément (réglez-la sur 200ms).
  4. Appliquez la fonction de temporisation cubic-bezier(0.165, 0.84, 0.44, 1) pour affiner l'accélération et la décélération de la transition.
index.html

index.html

index.css

index.css

copy

Tout était clair ?

Comment pouvons-nous l'améliorer ?

Merci pour vos commentaires !

Section 3. Chapitre 7
some-alt