27799 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai partiellement réussi à faire une animation d'un bloc qui, lorsqu'il est survolé, se fait pousser par un autre via une transition sur 2 secondes:
https://www.training-dev.fr/Code-Tester/Cin~IME!ds

Cela fonctionne assez bien pour le bloc de droite (le bloc vert .checkbox) qui est masqué au début, puis se déploie sur 2 secondes lorsqu'on survole son bloc parent (le bloc .container).

Mon souci, c'est que le bloc .text passe en un instant de sa taille max à sa taille mini, il n'y a pas de progression. Le texte en en effet immédiatement rogné à sa taille mini. J'ai mis un fond blanc pour qu'on voie mieux. Je souhaiterais que le bloc blanc réduise sa taille durant 2 secondes, poussé par le bloc vert. Ce n'est pas exactement le cas actuellement.

Est-ce que quelqu'un verrait comment modifier le bloc .text pour qu'il ait toujours une taille dynamique (pas une taille définie précisément) et qu'il réagisse comme je le souhaite.

Merci
En changeant
transition: transform 2s;

par
transition: all 2s;

c'est mieux... mais pas encore parfait.
Le div de droite ne pousse pas vraiment celui de gauche, il y a un espace entre les 2.
J'ai pensé que c'était peut-être dû à la marge droite de .container, j'ai donc tenté de la mettre à 0 mais cela ne solutionne pas le problème pour autant.

D'autre part, plus grave encore selon moi, le
transition: all

fait l'équivalent d'un
transition: transform

et d'un
transition: width

Or pour des raisons de performances, il n'est recommandé il me semble que d'utiliser les
transition: transform

et
transition: opacity


Est-ce que vous verriez une solution pour modifier cela de manière à n'utiliser que des transition: transform ou opacity et non le "transition: width"?

Merci
Administrateur
Hello,

Je n'ai malheureusement pas compris ce que tu voulais faire exactement Smiley ohwell

Par contre, en effet, il n'est pas possible de réaliser des transitions sur la valeur "auto", il faut géréralement jouer sur des valeurs de max-width ou max-height pour éviter auto.