Enchainement d'animations en CSS [Résolu]

Signaler
Messages postés
65
Date d'inscription
mercredi 2 décembre 2015
Statut
Membre
Dernière intervention
7 septembre 2020
-
Messages postés
65
Date d'inscription
mercredi 2 décembre 2015
Statut
Membre
Dernière intervention
7 septembre 2020
-
Bonjour à tous

dans une page de mon site je fais apparaitre des textes avec une animation CSS de la forme :

.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



Configuration: Linux / Firefox 76.0

1 réponse

Messages postés
65
Date d'inscription
mercredi 2 décembre 2015
Statut
Membre
Dernière intervention
7 septembre 2020

Si ça intéresse....

Ma solution est de mettre le même délai et la même durée pour tous les textes et ensuite de régler les apparitions des textes avec le @keyframes.
Pour que tous les textes disparaissent en même temps il suffit de mettre l'animation-fill-mode à none.
Mais ça oblige à écrire une classe CSS par texte
Chez moi ça donne ça :

html

<body>
<div class="labelo1">Texte 1</div>
<div class="labelo2">Texte 2</div>
<div class="labelo3">Texte 3</div>
</body>


CSS

.labelo1 {
position: absolute;
width: 300px;
height: 100px;
background-color: aqua;
top: 20%;
left: -50%;
opacity:1;
animation-name: gliss1;
animation-timing-function: ease;
animation-delay: 0s;
animation-duration: 8s;
animation-iteration-count: 1;
animation-fill-mode: none;
}
.labelo2 {
position: absolute;
width: 300px;
height: 100px;
background-color: aqua;
top: 40%;
left: -50%;
opacity:1;
animation-name: gliss2;
animation-timing-function: ease;
animation-delay: 0s;
animation-duration: 8s;
animation-iteration-count: 1;
animation-fill-mode: none;
}

.labelo3 {
position: absolute;
width: 300px;
height: 100px;
background-color: yellow;
top: 60%;
left: -50%;
opacity:1;
animation-name: gliss3;
animation-timing-function: ease;
animation-delay: 0s;
animation-duration: 8s;
animation-iteration-count: 1;
animation-fill-mode: none;
}


@keyframes gliss1 {
0%{
left:-50%;
}
20%{
opacity:1;
left:50%;
}
100% {
left: 50%;
opacity:1;
}
}

@keyframes gliss2 {
30%{
left:-50%;
}
50%{
left:50%;
opacity:1;
}
100% {
left: 50%;
opacity:1;
}
}

@keyframes gliss3 {
60%{
left:-50%;
}
80%{
left:50%;
opacity:1;
}

100% {
left: 50%;
opacity:1;
}
}