Animated Highlighter Text Effect CSS

A paragraph where three phrases are highlighted in turn, each one filling from left to right as if a marker pen were being dragged across it. The sweep runs once on load with a short stagger between the phrases, and every highlight wraps cleanly across line breaks.

Each phrase is a mark element with its default yellow background replaced by a gradient. The gradient is sized to zero width and positioned at the left edge, and an animation grows background-size to the full width, which produces the sweep. Because the background belongs to the inline element, the browser paints it on every line fragment, so a phrase that wraps is highlighted on both lines with no extra markup. The stagger is a longer animation-delay on each mark.

The effect is pure CSS and works in every current browser. Set the delays to zero for a static highlight.