![](//s1.studylibfr.com/store/data-gzf/7ccdf16a8ffb119262e297161f578a54/1/010108943.htmlex.zip/bg2.jpg)
Transition & Animation HTML5&CSS 2020-2021
Lycée Benane/Bodher Prof : Ben Fredj Narjess |page2
CSS : En utilisant la classe transition-
1, ajoutez un effet de transition lors
du survol du carré avec les critères
suivants :
Durée de la transition :
2 secondes.
HTML : Dupliquez
l’élément <div> du carré et
attribuez à la copie la
classe transition-2 à la place
de transition-1.
CSS : En utilisant la classe transition-
2, ajoutez une bordure épaisse
lorsque l’on survole le carré avec la
souris.
CSS : Ajoutez la propriété box-
sizing avec la valeur border-
box pour que la bordure fasse partie
des 100 pixels de votre carré.
CSS : En utilisant la classe transition-
2, ajoutez un effet de transition lors
du survol du carré avec les critères
suivants :
-Durée de la transition :
2 secondes ;
-Délai avant le début de la
transition :
0,5 seconde ;
-Rythme de transition :
régulier (linéaire).
HTML : Dupliquez
l’élément <div> du carré et
attribuez à la copie la
classe transition-3.
CSS : En utilisant la classe transition-
3, reproduisez l’effet de transition
illustré par l’image ci-dessous.
La
transformation du carré en cercle
s’effectue avec la propriété CSS qui
permet d’arrondir les bordures…