A client wanted an animated image effect similar to somebody whimsically underlining a few words of text with an equally whimsical colored writing instrument.
Thankfully, this is pretty straightforward with the use of keyframes
in CSS. In a nut, we start with a width
attribute of 0
on the element we want to animate, then set the animation
property to the keyframes we defined, the timing function we want to use, the animation duration, and the fill mode. We could define each of these separately, but superfluous typing is for suckers.
See the Pen Animate graphic reveal by Brett Kelly (@brettkelly) on CodePen.