Enchainement d'animations en CSS

Version imprimable

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

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 :

Code:

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

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
.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;
    }
}

Salut

Tu peux toujours réduire un peu le

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
.Commun {
    position: absolute;
    width: 300px;
    height: 100px;
    left: -50%;
    opacity:1;
    animation-timing-function: ease;
    animation-delay: 0s;
    animation-duration: 8s;
    animation-iteration-count: 1;
    animation-fill-mode: none;
}
.labelo1 {
    background-color: aqua;
    top: 20%;
    animation-name: gliss1;
}
.labelo2 {
    background-color: aqua;
    top: 40%;
    animation-name: gliss2;
}
.labelo3 {
    background-color: yellow;
    top: 60%;
    animation-name: gliss3;
}
@keyframes gliss1 {
    0%   {left:-50%;}
    20%  {left:50%;}
    100% {left: 50%;}
}
@keyframes gliss2 {
    30% {left:-50%;}
    50% {left:50%;}
    100%{left: 50%;}
}
@keyframes gliss3 {
    60% {left:-50%;}
    80% {left:50%;}
    100% {left: 50%;}
}

en ajoutant la classe Commun au

Code:

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

08/09/2020, 13h59
fifidibosco

.

Bonjour ProgElecT

en effet, merci.

.