• Transitions paramétrées

    Pour simplifier les écritures, nous utilisons souvent la commande: transition:all 1s linear; (par exemple), où tous les attributs (all) reçoivent la même transition.

    Or, nous pouvons donner une transition particulière à chaque attribut; ainsi, dans cet exemple, dont le code est:

    <div style="width: 30vw; height: 33.75vw; border: 0.2vh solid black; margin: 1vh auto;">
    <p id="exp">Survol</p>
    </div>
    <style><!--
    #exp{position:absolute; z-index:1; width:10vw; height:10vw; border:0.4vh solid red; background:pink; border-radius:0%; transform:translate(5vw,10vw); margin:0vw 0vw; text-align:center; line-height:10vw; font-size:2vw; transition:transform 1s linear 0s, width 1s linear 1s, height 1s linear 2s, border 1s linear 3s, background 1s linear 4s, border-radius 1s linear 5s, margin 1s linear 6s;}
    #exp:hover{width:20vw; height:20vw; border:0.6vh ridge green; background:yellow; border-radius:50%; transform:translate(7vw,8vw); margin:-2vw 0 0 0vw;}
    --></style>

    Nous trouvons une transition pour:

    le déplacement: transform 1s linear 0s

    la largeur: width 1s linear 1s

    la hauteur: height 1s linear 2s

    la bordure: border 1s linear 3s

    la couleur de fond: background 1s linear 4s

    les arrondis: border-radius 1s linear 5s

    les espaces extérieurs: margin 1s linear 6s

    Dans mon exemple, la vitesse de chacun des attributs est de 1 seconde avec un retard qui va de 0 seconde à 6 secondes.

    Nous pourrions ajouter des transitions pour d'autres attributs ce qui crée une animation au survol de ce type.

    Survol