🏆 Challenge #N13 · Transitions HTML · challenges/N13_transitions.html CSS · challenges/css/N13_transitions.css


À faire

  • À faire
  • Terminé
  • En cours
  • Incomplet
  • Blocage

Mémo

// Une transition permet d'effectuer un changement de style progressivement afin de le voir

transition: propriété durée courbe délai; // Format de la propriété transition


transition: all 1s linear; // Transition sur tout, qui dure 1 seconde, avec une courbe linéaire
transition: background-color .1s ease-in-out 1s; // Transition sur le changement de couleur de fond uniquement, qui dure 0.1 seconde, avec une courbe lente au début et à la fin, et un délai de 1 seconde
transition: background-color .1s ease-in-out, width .1s ease-in-out; // 2 transitions sur 2 propriétés uniquement, sur le même élément

1️⃣ Définir une transition

Lors du passage de la souris sur la boîte, celle-ci doit changer de couleur et prendre toute la longueur. Le changement de couleur doit durer 1 seconde, et le changement de longueur 3s avec un délai de 1s.

Lorem ipsum

🎯 Résultat attendu

Résultat attendu