28172 sujets

CSS et mise en forme, CSS3

[résolu] Position négative d'un bloc dont la hauteur n'est pas fix

Bonjour,

j'essaie de créer une animation avec un bloc caché par défaut en haut de page, qui descendrait ensuite de toute sa hauteur pour s'afficher en entier.

La difficulté est que la hauteur de ce bloc n'est pas fixée.

Comment animer tout ça avec CSS uniquement ?

upload/9380-example2.png

Merci aux courageux ! Smiley smile
Modifié par duclik (10 Jan 2017 - 18:05)
Bonjour.

Il n'y a pas de difficultés particulières : il faut positionner le bloc sur le bord haut de l'écran et commencer l'animation avec transform : translateY(-100%);

Smiley smile
Modérateur
Hello,

De ce que j'ai déjà pu faire avec des animations d'apparition de ce genre, j'ai toujours préféré mettre une valeur fixe pour mon translate (en px, em, vw, vh,...).
Si tu veux jouer l'animation sur plusieurs blocs les uns à coté des autres qui ont une hauteur différente, tu auras une vitesse d'animation différente.
-> Dans le même lapse de temps, il devront parcourir plus ou moins de distance donc à une vitesse plus ou moins rapide.

Et tu verras, que tu descendes de 20px ou de 100%, avec l'effet d'opacité tu ne verras pas la différence Smiley smile
Merci à vous deux.

C'était exactement ça mon problème Yordi, j'ai plusieurs blocs de tailles différentes et on voit assez clairement un décalage entre un grand et un petit, je voulais une solution plus propre qu'une hauteur figée ou un margin négatif fixe.

Merci Zelena, tu as vu juste, c'est la solution trouvée entre temps. Comme d'habitude mon code était pas joli joli après mes tests et elle entrait en conflit avec d'autres propriétés, je ne comprenais pas pourquoi ça ne fonctionnait pas.
C'est réglé, et c'est bien la propriété transform:translate qui me sauve.

Dans mon cas, si ça peut servir à d'autres, j'ai positionné mon bloc mobile en position:absolute, bottom:0 dans son container. Et appliqué transform:translate(0,100%) pour décaler mon bloc de toute sa hauteur vers le bas.

A bientôt!
Modifié par duclik (10 Jan 2017 - 17:40)
Sujet clos
Aller à