Animation CSS3 faire apparaître une div après un delai

Bonjour =)

J'essaie de faire apparaitre une div au chargement de la page apres un delai de 2 secondes.

L'effet d'apparition marche, mais si je mets un delai, la div reste normale, attend 2 secondes, puis joue l'effet d'apparition.

Ce qui donne :

@keyframes transition {
0%   { margin-left: -70px; }
100% { margin-left: 0; }
}
@keyframes opacity {
0%   { opacity: 0%; }
100% { opacity: 100%; }
}
div { animation: transition 1.0s ease-in-out 2.0s, opacity 1.0s ease-in-out 2.0s; }

Il faudrait qu'elle ai un etat initial de opacity 0 puis un etat d'apres l'animation de opacity 100%...

Merci =)
Modifié par LightBen (17 Sep 2013 - 11:51)

salut,
il n'existe pas de pourcentage avec la propriété "opacity", ça va de 0 à 1. De plus tu essayes de créer une apparition en fondu alors que l'opacité initiale est à 1 c'est donc normal que tu le voies, puis après un certain délai il disparait puis apparaît.
Tu dois donc partir d'un état initial avec une opacité de 0, l'animer et ajouter à la propriété "animaiton" "forwards" pour que l'état final de l'animation soit conservé. Tu peux en plus combiner tes deux animations en une seule.

@keyframes transition {
0%   { margin-left: -70px;opacity:0; }
100% { margin-left: 0;opacity:1; }
}
div {opacity:0;animation: transition 1s ease-in-out 2s forwards;}

Salut =)

Pour l'opacité, tu dois avoir raison mais avec les % ça marchait aussi
Je n'ai pas combiné les deux animations car j'utilise l'opacity en commun avec d'autres éléments dans la page
En fait, ce qui me manquait c'est forwards dans l'animation, qui permet apparemment a l'animation de rester a son etat final.

Merci =D