Gestion d'un effet de révélation de texte

**labarre2002** · 11/04/2026, 15h15

Bonjour

je viens de réaliser cette page

Code HTML :

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
 
<body>
 
    <main class="content">
           <div class="pic first">
 
                   <div class="text">
                        <span>chiot</span>
                    </div>
                <div class="overlay" style="--i:0;"> 
 
                </div>
           </div>
                  <div class="pic two">
                         <div class="text">
                            <span>husky</span>
                         </div>
                      <div class="overlay" style="--i:1;">
 
                      </div>
                  </div>
           <div class="pic three">
                      <div class="text">
                        <span>berger</span>
                      </div>
                 <div class="overlay" style="--i:2;" >
 
                 </div>
           </div>
 
 
    </main>

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
91
92
93
94
95
96
97
 
body{
    height: 100svh;
}
.content{
    width: 100%;
    height: 100%;
   display: flex;
}
 
.content> *{
    flex: 1;
}
 
.text{
    width: 80%;
    height: 8%;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    mix-blend-mode:difference;
 
    }
 
span{
font-family: verdana;
font-size: 3.5rem;
color: darkgray;
font-weight: bold;
text-transform: capitalize;
display: block;
letter-spacing: 8px;
text-align: center;
line-height:1.2;
transform: translateY(100%);
transition: .5s cubic-bezier(.06,1,.21,.95);
animation: up 2.5s forwards;
}
 
 
 
 
.first{
    background-image: url("img/two.jpg");
    background-position: center;
    background-size: cover;
}
.two{
    background-image: url("img/husky.jpg");
    background-position: center;
    background-size: cover;
}
 
.three{
    background-image: url("img/berger.jpg");
    background-position: center;
    background-size: cover;
}
 
.pic{
    position: relative;
   }
 
.overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 2;
    animation: fade-in 1.5s forwards 300ms;
    animation-delay: calc(var(--i)* 1s);
}
 
@keyframes up{
    0%{
        transform: translateY(100%);
    }
 
    100%{
        transform: translateY(0);
    }
}
 
 
@keyframes fade-in{
    0%{
        transform: translateY(0);
    }
 
    100%{
        transform: translateY(-100%);
    }
}

Je souhaite que l'animation sur l'apparition des textes se déclenche quand le rideau est levé puis-je avoir une suggestion ou des pistes ?

Merci.

**NoSmoking** · 11/04/2026, 16h43

Bonjour,

Envoyé par labarre2002

Je souhaite que l'animation sur l'apparition des textes se déclenche quand le rideau est levé puis-je avoir une suggestion ou des pistes ?

on avait déjà traité un cas un peu similaire et ce qui en était ressorti ( Voir la discussion sur Developpez.com ) :

Exemple de mise en œuvre :

↪ Utilisation de l'événement animationend

C'est en JavaScript.

**NoSmoking** · 12/04/2026, 10h31

Comme je dois m’absenter ces prochains jours je te fournis une solution en CSS « pur et dur »

Le premier point est qu'il te faut mettre l'indicateur de compteur, style="--i:0;" non pas sur l'élément class="overlay" mais sur l’élément class="pic" par exemple, ce qui donne le HTML suivant :

Code html :

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
<main class="content">
  <div class="pic first" style="--i:0;">
    <div class="text">
      <span>chiot</span>
    </div>
    <div class="overlay">
    </div>
  </div>
  <div class="pic two" style="--i:1;">
    <div class="text">
      <span>husky</span>
    </div>
    <div class="overlay">
    </div>
  </div>
  <div class="pic three" style="--i:2;">
    <div class="text">
      <span>berger</span>
    </div>
    <div class="overlay">
    </div>
  </div>
</main>

deuxième point, il te faut modifier les CSS comme suit, seules les règles ce que j'ai modifiées sont reprises :

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
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
.pic{
  position: relative;
 
  /*-- modif/ajout --*/
  --duration-overlay: 1.5s;
  --duration-texte: 2.5s;
  --delay-texte: var(--duration-overlay); /* quand animation overlay terminé */
}
 
.pic span{
  font-family: verdana;
  font-size: 3.5rem;
  color: darkgray;
  font-weight: bold;
  text-transform: capitalize;
  display: block;
  letter-spacing: 8px;
  text-align: center;
  line-height:1.2;
  transform: translateY(100%);
  transition: .5s cubic-bezier(.06,1,.21,.95);
 
  /*-- modif/ajout --*/
  --num : calc(var(--i) + 1);
  animation: up var(--duration-texte) forwards;
  animation-delay: calc(var(--num) * var(--delay-texte));
}
.overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 2;
 
  /*-- modif/ajout --*/
  animation: fade-in var(--duration-overlay) forwards;
  animation-delay: calc(var(--i) * var(--duration-overlay));
}

rien de bien compliqué à comprendre.
Il te reste à ajuster suivant ton besoin

**labarre2002** · 13/04/2026, 22h48

merci @NoSmoking pour tes méssages j'ai trouvé cette solution

Code HTML :

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
 
 
<main class="content">
           <div class="pic first" style="--i:0;">
                   <div class="picture">
                    <img src="img/two.jpg" alt="ciot">
                   </div>
                   <div class="text">
                        <span>chiot</span>
                    </div>
                <div class="overlay"> 
 
                </div>
           </div>
                  <div class="pic two"  style="--i:1;">
                       <div class="picture">
                        <img src="img/husky.jpg" alt="huskyy">
                       </div>
                         <div class="text">
                            <span>husky</span>
                         </div>
                      <div class="overlay">
 
                      </div>
                  </div>
           <div class="pic three" style="--i:2;">
                      <div class="picture">
                        <img src="img/berger.jpg" alt="berger">
                      </div>
                      <div class="text">
                        <span>berger</span>
                      </div>
                 <div class="overlay" >
 
                 </div>
           </div>
 
 
    </main>

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
91
92
93
94
95
 
span{
font-family: verdana;
font-size: 3.5rem;
color: darkgray;
font-weight: bold;
text-transform: capitalize;
display: block;
letter-spacing: 8px;
text-align: center;
line-height:1.2;
transform: translateY(100%);
animation: up 1s forwards;
animation-delay: calc(1.5s + (var(--i) * .5s));
}
 
.picture{
    width: 100%;
    height: 100%;
    opacity: 0;
    animation:appear 1s forwards;
    animation-delay: calc(var(--i)* .5s);
   }
 
.picture  img{
    width: 100%;
    height: 100%; 
    object-fit: cover;
    transform:scale(1.3);
    animation: show 1.5s forwards;
    animation-delay: calc(var(--i)* .5s);
}
 
.pic{
    position: relative;
    overflow: hidden;
 
    }
 
.overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 2;
    animation: fade-in 1.5s forwards;
    animation-delay: calc( var(--i)* .3s);
}
 
@keyframes up{
    0%{
        transform: translateY(100%);
    }
 
    100%{
        transform: translateY(0);
    }
}
 
 
@keyframes fade-in{
    0%{
        transform: translateY(0);
    }
 
    100%{
        transform: translateY(-100%);
    }
}
 
@keyframes show{
    0%{
        transform:scale(1.3);
        filter: blur(5px);
    }
 
 
    100%{
        transform: scale(1);
        filter: blur(0);
    }
}
 
 
@keyframes appear{
    0%{
        opacity: 0;
    }
 
   100%{
    opacity: 1;
   }
}

**Declique69** · 29/04/2026, 08h49

En utilisant des temporisation, tu seras toujours à la merci d'un aléa. Il vaut mieux utiliser les événements liés aux animations : animationStart et animationEnd

Cela fait écrire un peu de javascript mais cela reste très simple.

Gestion d'un effet de révélation de texte

CSS

Discussions similaires

Partager

Partager