Delay your CSS animations to make them cleaner


CSS Transition animation can flicker on hover, this is how you can fix that!

18 Mar, 2021 · 2 min read

CSS animations are amazing, I often use them, but recently I learned it’s a good practice to add a small delay, so they don’t flicker if the user accidentally hovers it.

To demonstrate what I mean by that, check what’s happening here:

CSS flickering animation transition

Pretty annoying, this one isn’t the worse, but it might become super annoying if you add some more transitions.

So how can we fix this?

Adding a CSS transition-delay

In general, for our above example, we use the following CSS.

button {
  background: #6d597a;
  transition: background 0.2s ease-in-out;
button:hover {
  background: #b56576;

Fair enough, right? It animates the background in 0.2 seconds from our initial color to the new color.

However, this gives us that annoying flickering effect if we hover it too quickly.

The solution is quite simple. We can add a so-called animation-delay

It comes as the 1st of the timing options:

transition: background 0.2s 0.1s ease-in-out;

In my case, the second time parameter (0.1) is the delay. It adds an animation-delay: 0.1s. This is the time our animation won’t start working.

CSS Animation delay fix

Above, you can see the fix in action. Pretty cool, right?

Try it out on this Codepen.

See the Pen Delay your CSS animation to make then cleaner by Chris Bongers (@rebelchris) on CodePen.

Thank you for reading, and let’s connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter

Spread the knowledge with fellow developers on Twitter
Tweet this tip
Powered by Webmentions - Learn more

Read next 📖

Modifying an SVG path with CSS

10 Dec, 2022 · 2 min read

Modifying an SVG path with CSS

Animate an SVG path with CSS

9 Dec, 2022 · 2 min read

Animate an SVG path with CSS

Join 2100 devs and subscribe to my newsletter