Animation on a letter
Hi everyone
I get a problem with an animation on letter
the problem is a the last letter appear at the same time than the first one
can I get some explication about what is going wrong
my css:
thanks
I get a problem with an animation on letter
<div class="title1">
<h2>
<span>c</span>
<span>h</span>
<span>e</span>
<span>z</span>
</h2>
</div><div class="title1">
<h2>
<span>c</span>
<span>h</span>
<span>e</span>
<span>z</span>
</h2>
</div>the problem is a the last letter appear at the same time than the first one
can I get some explication about what is going wrong
my css:
h2 span{
font-weight: bold;
font-size:27.7777vh;;
text-transform: capitalize;
position: relative;
-webkit-text-stroke: 3px black;
color: transparent;
line-height: 23.1111vh;
letter-spacing: .04em;
white-space: pre;
}
.title1 h2 span{
display: inline-block;
transform: translateY(100%);
animation: reveal .5s cubic-bezier(0.075,0.82,0.165,1) forwards;
}
.title1 h2 span:nth-child(2){
animation-delay: .7s;
}
.title1 h2 span:nth-child(3){
animation-delay: .9s;
}
.title1 h2 span:nth-child(4){
animation-delay: .12s;
}
@keyframes reveal{
to{
transform: translateY(0%);
}
}h2 span{
font-weight: bold;
font-size:27.7777vh;;
text-transform: capitalize;
position: relative;
-webkit-text-stroke: 3px black;
color: transparent;
line-height: 23.1111vh;
letter-spacing: .04em;
white-space: pre;
}
.title1 h2 span{
display: inline-block;
transform: translateY(100%);
animation: reveal .5s cubic-bezier(0.075,0.82,0.165,1) forwards;
}
.title1 h2 span:nth-child(2){
animation-delay: .7s;
}
.title1 h2 span:nth-child(3){
animation-delay: .9s;
}
.title1 h2 span:nth-child(4){
animation-delay: .12s;
}
@keyframes reveal{
to{
transform: translateY(0%);
}
}thanks
