Un beau bloc avec des bords arrondis
Voici une petite page en HTML avec un bloc gris arrondi grâce à la propriété CSS3 border-radius avec du texte ombré par text-shadow.
Côté transition maintenant: vous avez remarqué que dans le :hover de la div je souhaite changer la couleur de fond et du texte, ainsi que le rayon du cercle du border-radius. Jusque-là, rien de nouveau. Sauf que si vous essayez, vous vous rendrez compte que tous ces changements se font progressivement grâce à la propriété ci-dessous.
Et la durée de la transition se fait par celle-là :
Un beau bloc avec des bords arrondis
Si je veux changer une valeur dans la transition, ici 5 secondes pour le changement de couleur du texte, je dois ajouter à mon code HTML une classe id="cours_2" par exemple à ma balise P, et dans mon CSS j’ajoute la classe p#cours_2:hover avec la valeur color de div#cours:hover que j’ai supprimée.
Surtout j’ajoute bien les valeurs transition-property: color; et transition-duration: 5s; comme ci-dessous :
Comme vous le savez, parce que vous venez juste de le lire, il est possible de définir quand la transition va avoir lieu en utilisant transition-delay.
Le même exemple mais avec effet retardé :
On se rend compte que l'animation sur les angle se déclenche 2s après le survol de la div.
Cette propriété accepte deux unités de temps pour sa valeur : la seconde notée "s" et la milliseconde "ms".
Un beau bloc avec des bords arrondis