Variante horizontale

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.