00628 00628 - 5 months ago 8
CSS Question

how would one make multiple text shadows appear in order?

i've tried using

transition: all .4s steps(4, end);
but of course, all the shadows appear in four steps, though i'd like one shadow to appear, then the next, and the next, and so on, in the
.4s
of the transition. this is the site.

CSS:

a {
color: white;
text-decoration: none;
}
a:hover, a:active {
text-decoration: line-through;
transition: all .4s steps(4, end);
text-shadow: 6px 2px rgba(255, 255, 255, .4), -6px 2px rgba(255, 255, 255, .8), 6px -2px rgba(255, 255, 255, .2), -6px -2px rgba(255, 255, 255, .6);
}

Answer

The first parameter of transition is the property to which you want to apply the transition. In your case you have specified all and perhaps you should have specified text-shadow

Then in text-shadow specify only the final state, because you are already asking it to go through 4 steps.

I have checked the code and it seems to work fine:

a {
color: white;
text-decoration: none;
}
a:hover, a:active {
    text-decoration: line-through;
    transition: text-shadow .4s steps(4, end);
    text-shadow: 6px 2px rgba(255, 255, 255, .6);
}