I added animation to a text with a linear gradient. But the gradient effect on text shows only after completing the animation. Text animation working properly. The issue is only with the text gradient. How to do the animation to text with gradient?
ul {
list-style: none;
display: flex;
cursor: default;
justify-content: center;
transition: 5s;
align-items: center;
position: relative;
z-index: 1;
top: 35vh;
left: -4%;
}
li {
font-size: 12vw;
font-weight: bolder;
margin: .1em;
position: relative;
background: -webkit-linear-gradient(green, yellow);
background: linear-gradient(green, yellow);
background-clip: text;
color: transparent;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 1px rgb(76, 70, 245);
}
li::before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
z-index: -1;
text-shadow: .02rem -.02rem .1rem gray,
.05rem -.05rem .1rem gray,
.08rem -.08rem .1rem gray,
.11rem -.11rem .1rem gray,
.14rem -.14rem .1rem gray,
.17rem -.17rem .1rem gray,
.20rem -.20rem .1rem gray,
.23rem -.23rem .1rem gray,
.26rem -.26rem .1rem gray,
.29rem -.29rem .1rem gray,
.32rem -.32rem .1rem gray,
.3rem .2rem .5rem gray;
}
@keyframes year {
50% {
transform: translateX(-5vw) translateY(-35vw) rotate(-180deg);
}
100% {
transform: rotate(-360deg);
}
}
li:nth-child(1) {
animation: year 2s linear;
}
li:nth-child(2) {
animation: year 2s linear;
animation-delay: 1s;
}
li:nth-child(3) {
animation: year 2s linear;
animation-delay: 2s;
}
li:nth-child(4) {
animation: year 2s linear;
animation-delay: 3s;
}<div class="year">
<ul>
<li data-text="2">2</li>
<li data-text="0">0</li>
<li data-text="2">2</li>
<li data-text="2">2</li>
</ul>
</div>Please help me do the animation with the text gradient shown from the beginning of the animation.