I am looking to create a cool effect using CSS animations where three lines of text fade in one by one, all without the need for JavaScript or other CSS modules.
Below is the code snippet I have tried:
body{background-color: black;}
.text-zone{
position: absolute;
left: 20%;
top: 35%;
width: 50%;
max-height: 90%;
}
.text{
font-size: 60px;
color: #fff;
line-height: 53px;
font-weight: 600;
font-family: 'Alegreya Sans', sans-serif;
}
#delayedText1 {
opacity: 0;
animation-name: fade1;
animation-duration: 1s;
animation-delay: 1s;
}
#delayedText2 {
opacity: 0;
animation-name: fade2;
animation-duration: 1s;
animation-delay: 2s;
}
#delayedText3 {
opacity: 0;
animation-name: fade3;
animation-duration: 1s;
animation-delay: 3s;
}
@keyframes fade1 {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fade2 {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fade3 {
from {opacity: 0;}
to {opacity: 1;}
}<div class="text-zone">
<div class="text">
<h1 id="delayedText1">Hi,</h1>
<h1 id="delayedText2">I'm Faizan,</h1>
<h1 id="delayedText3">web developer.</h1>
</div>
</div>
However, upon running this code, I encountered an issue where there was a delay of one second before all the text faded in at once and then disappeared after another second. As a beginner in CSS animations, I believe this might be a simple mistake on my end. Can someone please help me understand what went wrong?
Appreciate your assistance!