• Variante horizontale

     

    Survol

     

     

     

     

     

     

     

     

     

     

     

     


    Je sais que les personnes intéressées trouveront le code du montage dans le code source de la page mais je voudrais ajouter une petit explication:

    box-sizing:border-box; pas en class.

    Margin pour les éléments de droite car transform comporte 2 paramètres indissociables alors que margin en comporte 4 indépendants.

    transition sur 3 attributs:width (largeur), transform(positionnement vertical), height(hauteur) pour élément de gauche

    transition sur 4 attributs:width, transform, height, margin(espace vertical) pour élément de droite; notre écriture allant de gauche à droite, les éléments de gauche vont dans le bon mouvement, contrairement à ceux de de droite.

    La transition de chaque attribut et fonction de l'animation souhaitée:
    Eléments de gauche:
    largeur d'abord:width 1s linear 0s,
    Positionnement vertical ensuite:transform 1s linear 1s,
    en même temps que le positionnement vertical, la hauteur: height 1s linear 1s;

    Elément de droite:
    largeur d'abord:width 1s linear 0s,
    en même temps que la translation horizontale: transform 1s linear 0s,
    Puis hauteur:height 1s linear 1s,
    et, en même temps que la hauteur, le positionnement vertical: margin 1s linear 1s;

    Pour les éléments de droite: Utiliser transform:translate(H,V) et margin:haut,droit, bas, gauche permet d'éviter que transform n'agisse sur 2 paramètres (h et v).
    Ainsi, transform agit sur un attribut: positionnement horizontal et margin sur le positionnement vertical, ce qui permet de jouer sur le retard de l'action de l'un par rapport à l'autre.