Text Highlight Effects

When you want something to stand out, giving a word an animated underline or highlight effect is a great way to draw attention to it.

Animated Highlight Effects

CSS-based Animation

Give your element a custom class, here we'll use _.anim-bg.

Change the speed of the animation by modifying the _0.6s on the animation line.

If you want to control the acceleration and deceleration of the animation, you can adjust the timing function using the animation-timing-function property or by adding it to the shorthand animation property.

The default value is ease, which starts slow, becomes faster in the middle of the animation, and slows down at the end. Some other common values include:

• linear: The animation has a constant speed from start to end.
• ease-in: The animation starts slowly and accelerates.
• ease-out: The animation starts fast and decelerates.
• ease-in-out: The animation starts slowly, accelerates in the middle, and decelerates at the end.

Codepen demo;

‍