• En douceur

    J'utilise le plus souvent une écriture simplifiée pour les transitions CSS mais on peut se rappeler de l'écriture complète pour créer une animation qui n'est pas automatique, comme avec le code animation.

    Rappel: les paramètres d'un élément identifié et ceux de son animation au survol peuvent être définis en lignes CSS3.

    <p id="ex1">A</p>

    <style><!--

    #ex1{transition:all 1s linear; transform:translate(100px,0px) ; width:50px; height:50px; border:1px solid black; font-size:25pt; text-align:center; color:white; text-shadow: 1px 1px black;}

    #ex1:hover{ width:100px; height:100px; font-size:45pt; color:lime; text-shadow:2px 2px black;}

    --></style>

    Ce qui donne, à survoler:

    A

    Dans cet exemple, tout les paramètres (couleur, taille, police, ombre) sont modifiés ensemble (transition:all 1s linear;)

    On peut définir un temps de départ pour chaque paramètre (attribut) et, par exemple, modifier la largeur, puis la hauteur, puis la couleur, etc...

    #ex1{transition:width 1s linear 0s, height 1s linear 1s, border 1s linear 2s; color 1s linear 3s .... les 0s/1s/2s/3s ... étant les temps de retard de chaque attribut pas rapport au début du survol.

    Certains attributs sont indépendants: width, height, border ... d'autres (translation latérale/verticale, rotation, déformation) sont des transformations qui s'écrivent dans le paramètre: transform:translate(0px,0px) rotate(15deg) skew(-10deg);

    Survolez cet exemple que je détaillerais si cela motive certain(e)s !