Enchainement d'animations en CSS
Résolu
fifidibosco
Messages postés
70
Date d'inscription
Statut
Membre
Dernière intervention
-
fifidibosco Messages postés 70 Date d'inscription Statut Membre Dernière intervention -
fifidibosco Messages postés 70 Date d'inscription Statut Membre Dernière intervention -
Bonjour à tous
dans une page de mon site je fais apparaitre des textes avec une animation CSS de la forme :
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
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
A voir également:
- Enchainement d'animations en CSS
- Logiciel enchainement musique automatique gratuit - Forum Audio
- Mixer automatique avec Virtual DJ Home 7 ✓ - Forum Enregistrement / Traitement audio
- Enlever le soulignement d'un lien css - Astuces et Solutions
- DJ Facile - Télécharger - DJ & Karaoké
- Css exposant ✓ - Forum CSS
1 réponse
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
CSS
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;
}
}
