CSS Animation Notes
A quick addendum to my post about text shadows: Let’s add some animation.
As a reminder, we can create great looking curved text with a radiant text shadow to add a pretty highlight:
.shady-demo-curve {
color: white;
background: lightgrey;
font-size: 3em;
}
.shady-demo-curve svg {
filter: drop-shadow(0 0 5px red) drop-shadow(0 0 10px red) drop-shadow(0 0 15px red);
}
<div style="display: block" class="shady-demo-curve">
<svg viewBox="0 0 200 70">
<defs>
<path id="demo-curve" d="m 15 -25 a 85 85 0 0 0 170 0" />
</defs>
<text font-size="20px" text-anchor="middle" fill="white" stroke="white">
<textPath startOffset="50%" alignment-baseline="top" xlink:href="#demo-curve"> GOOD AFTERNOON! </textPath>
</text>
</svg>
</div>
Now we’re going to add a subtle flash to the shadow effect. Here’s a good first attempt:
.shady-demo-curve1 svg {
filter: drop-shadow(0 0 5px red) drop-shadow(0 0 10px red) drop-shadow(0 0 15px red);
}
.shady-demo-curve1.animate svg {
animation-name: pulse-svg;
animation-duration: 7s;
animation-iteration-count: infinite;
}
@keyframes pulse-svg {
0% {
filter: drop-shadow(0 0 5px red) drop-shadow(0 0 10px red) drop-shadow(0 0 20px red);
}
10% {
filter: drop-shadow(0 0 5px red) drop-shadow(0 0 10px red) drop-shadow(0 0 20px red) drop-shadow(0 0 30px red);
}
20% {
filter: drop-shadow(0 0 5px red) drop-shadow(0 0 10px red) drop-shadow(0 0 20px red);
}
}
We’ve added a brief flash by adding an extra, larger, blur effect with a keyframes animation.
Depending on your browser, this might look just fine already. Firefox shows this just fine, but Safari will either flash the animation without the usual keyframe easement, or will add some glitchy animation artifacts. Both of which look super janky.
Fortunately, there is a good, quick fix. If we add the extra drop shadow filter as an additional transparent filter which is always present, the animation is fixed.
.shady-demo-curve2 svg {
filter: drop-shadow(0 0 5px red) drop-shadow(0 0 10px red) drop-shadow(0 0 15px red) drop-shadow(0 0 30px transparent);
}
.shady-demo-curve2.animate svg {
animation-name: pulse-svg2;
animation-duration: 7s;
animation-iteration-count: infinite;
}
@keyframes pulse-svg2 {
0% {
filter: drop-shadow(0 0 5px red) drop-shadow(0 0 10px red) drop-shadow(0 0 20px red) drop-shadow(0 0 30px transparent);
}
10% {
filter: drop-shadow(0 0 5px red) drop-shadow(0 0 10px red) drop-shadow(0 0 20px red) drop-shadow(0 0 30px red);
}
20% {
filter: drop-shadow(0 0 5px red) drop-shadow(0 0 10px red) drop-shadow(0 0 20px red) drop-shadow(0 0 30px transparent);
}
}
I have no idea why this works. I guess WebKit doesn’t have a representation of the extra shadow filter that is defined in the 10% keyframe. It doesn’t exist until 10%, and therefore the animation effect cannot be eased in. For other browser engines, perhaps they recognise that an extra filter object is required and create an empty one, to which the animation easement can be applied.
Nevertheless, it’s one of those browser quirks, and highlights why testing on multiple browsers is so important
Cover photo by David Werbrouck on Unsplash