En-tete Astuces divers html et css
Classic Moderne

Transition simple:



Un beau bloc avec des bords arrondis




<div id="cours"><p>Un beau bloc avec des bords arrondis</p></div>

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.


transition-property: background-color, border-radius;


Et la durée de la transition se fait par celle-là :


transition-duration: 1s;



Si le changement de la couleur du texte n'est pas progressif, c'est tout simplement parce que la propriété color n'est pas référencée dans cette déclaration.
Si j'ajoute cette propriété au code CSS, alors le changement gradué du texte se fait.

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 :


Code HTML Complet


<div id="cours"><p id="cours_2">Un beau bloc avec des bords arrondis</p></div>

Code CSS Complet


div#cours
{
width: 300px;
height: 200px;
margin: 0px auto;
line-height: 200px;
text-align: center;
background-color: silver;
border-radius: 20px;
color: white;
font-weight: bold;
text-shadow: 1px 1px 2px black;

transition-property: background-color, border-radius;
transition-duration: 1s;
}

div#cours:hover
{
background-color: #4282b4;
border-radius: 60px;
}

p#cours_2:hover
{
border-radius: 60px;
color: yellow;
transition-property: color;
transition-duration: 5s;
}


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




transition-property: background-color, border-radius;
transition-duration: 1s;
transition-delay: 2s;










Haut-de-Page