How to animate an image reveal in pure CSS with Keyframes

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.

Leave a Comment

Scroll to Top