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

book
Dé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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="box"></div>
</body>
</html>
  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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="box"></div>
</body>
</html>

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

We use cookies to make your experience better!
some-alt