Sample of a Character-by-Character Fade-In and Fade-Out Animation in CSS
By using CSS custom properties (variables), you can apply the same
animation and @keyframes while assigning different
property values to each individual animation.
In this example, CSS custom properties are used to give each character a
different delay value, creating a staggered fade-in and fade-out text animation.
F
a
d
e
I
n
F
a
d
e
O
u
t
Source Code
The custom property (variable) --mamOpacityDelay is used to set the animation delay.
<div class="mamOpacity">
<span><span style="--mamOpacityDelay: 0ms;">F</span></span>
<span><span style="--mamOpacityDelay: 250ms;">a</span></span>
<span><span style="--mamOpacityDelay: 500ms;">d</span></span>
<span><span style="--mamOpacityDelay: 750ms;">e</span></span>
<span><span style="--mamOpacityDelay:1000ms;">I</span></span>
<span><span style="--mamOpacityDelay:1250ms;">n</span></span>
<span><span style="--mamOpacityDelay:1500ms;"> </span></span>
<span><span style="--mamOpacityDelay:1750ms;">F</span></span>
<span><span style="--mamOpacityDelay:2000ms;">a</span></span>
<span><span style="--mamOpacityDelay:2250ms;">d</span></span>
<span><span style="--mamOpacityDelay:2500ms;">e</span></span>
<span><span style="--mamOpacityDelay:2750ms;">O</span></span>
<span><span style="--mamOpacityDelay:3000ms;">u</span></span>
<span><span style="--mamOpacityDelay:3250ms;">t</span></span>
</div>
<style>
.mamOpacity{
font-size:32px;
padding:4px;
}
.mamOpacity>span{
position:relative;
display:inline-block;
width:1em;
vertical-align:top;
}
.mamOpacity>span>span{
position:absolute;
color:#333;
text-shadow:2px 2px 3px rgba(0,0,0,0.5);
/* animation-name | duration | timing-function | delay | infinite | alternate */
animation:mamAniOpacity 10000ms ease-in-out var(--mamOpacityDelay) infinite normal both running;
}
@keyframes mamAniOpacity{
0%{
transform:scale(2,2);
opacity:0.0;
}
5%{
transform:scale(1,1);
opacity:1.0;
}
60%{
transform:scale(1,1);
opacity:1.0;
}
65%{
transform:scale(2,2);
opacity:0.0;
}
100%{
transform:scale(2,2);
opacity:0.0;
}
}
</style>