28172 sujets

CSS et mise en forme, CSS3

[Résolu] @keyframes

Bonjour,
Je veux réaliser une animation consistant à faire entrer un certain nombre de lettres dans la page, chacune sortant du bord de la page pour venir prendre sa place dans une div, le tout devant constituer un titre.
Quelle que soit la lettre que je fais sortir en premier, ça marche bien. Mais l'animation ne marche pas pour les lettres suivantes qui s'affichent sans déplacement visible.
Question = peut-on utiliser plusieurs @keyframes successivement dans une page, chacun ayant un nom différent évidemment ? Faut-il réinitialiser quelque chose entre deux @keyframes (dans mon cas, entre deux lettres) ?
Merci d'avance.
Merci Wollsale.

J'ai trouvé dimanche la réponse à ma question : oui, on peut utiliser plusieurs @keyframes dans une même page. J'en ai 17 et ça marche. toutes mes lettres entrent dans la page.

Problème, c'est le bazar ! La moitié des lettres ne sont pas à leur place. J'ai 2 fois 17 div placées en position "absolute". Aussi, à ce jour, je suspecte des erreurs dans mes coordonnées.

Mais il y a une autre hypothèse : ce serait que les timers des différent @keyframes interfèrent entre eux. Ca me semble étonnant...

J'y reviendrai quand j'aurai mis de l'ordre, et si je trouve une réponse
Merci aliasdmc.

Ma page est maintenant impeccable : les @keyframes marchent et j'ai mis de l'ordre dans mes coordonnées pour les positions "absolute".

HTML
.........
<div id="bde4">
	<img src="EEE_125.jpg" alt="E4">
</div>

...........

style.css

.......
@keyframes anime4
{
from {margin-left : 785px; margin-top : 525px;}
to {margin-top : 235px; margin-left : 627px;}
}

#bde4
{
position : absolute;
width : 120px;
height : 125px;
margin-top : 525px;
margin-left : 785px;
animation-name : anime4;
animation-delay : 5s;
animation-duration : 3s;
animation-fill-mode : forwards;
}
#bae4
{
position : absolute;
width : 120px;
height : 125px;
margin-top : 235px;
margin-left : 627px;
}
.........
Sujet clos
Aller à