Enchainement d'animations en CSS

**fifidibosco** · 06/09/2020, 20h53

Bonjour à tous

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**fifidibosco** · 07/09/2020, 13h25

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
    }
}

**ProgElecT** · 07/09/2020, 15h07

Salut

Tu peux toujours réduire un peu le

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**fifidibosco** · 08/09/2020, 13h59

.

Bonjour ProgElecT

en effet, merci.

.

Enchainement d'animations en CSS [CSS 3]

CSS

Discussions similaires

Partager

Partager