Enchainement d'animations en CSS
Bonjour à tous
dans une page de mon site je fais apparaitre des textes avec une animation CSS de la forme :
Code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| .textappear {
opacity:0;
animation-name: appear;
animation-timing-function: ease;
animation-delay: 6.5s;
animation-duration: 1.5s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
@keyframes appear {
100% {
opacity: 1;
}
} |
il y a six textes qui s'affichent les uns après les autres. Ils utilisent tous l'animation appear, avec des délais différents, la duration étant la même pour tous les textes.
J'aimerai que tous ces textes disparaissent en même temps, 1 seconde après la fin de l'apparition du dernier texte.
Y a-t-il un moyen, en CSS uniquement, de faire ça ? Est-il possible, par exemple, d'enchainer deux animations, la première qui ferait apparaitre les textes et la seconde qui les ferait disparaitre ?
Comme ça ça serait assez facile, il suffirait que la somme de appear(delai+duration)+disappear(delai+duration) soit la même pour tous les textes. Mais je n'ai pas trouver le moyen d'enchainer deux animations successives pour une même DIV
Par avance merci,
Fifi