How to create a blinking effect using CSS?

Want to create a banner that stands out and grabs everyone’s attention, or a text that looks like it’s in a disco?

To create a blinking effect in CSS, simply adjust the opacity at different time frames, using keyframes and animation property in CSS.

Blink for an infinite time:

How it Works

In the source code above, I created an animation named ‘blink’ that has a cycle of 1 second (duration), is linear (timing function), and has an infinite delay, meaning the animation will go on forever.

In the keyframe ‘blink’, I set the opacity to adjust three times in one cycle, with 1 being the default opacity at 0% and 100%.

So, the blinker div has an opacity of

1 at 0%
0.5 at 25%
0 at 50%
0.5 at 75%
1 at 100%

The opacity of the div went through the change in one cycle, i.e in1 second, and kept repeating indefinitely. Demo

Blink for n-seconds:

How it Works

To limit the blinking effect to a certain time period, simply change the delay from infinite to any number of seconds you like, replacing n in the above code snippet with the preferable time (in seconds).

The opacity of the div went through the change in one cycle, i.e in1 second, and kept repeating for n-seconds.

Conclusion

A fun little experiment with animation to create a blinking effect, you can play around and change the duration, timing function, and delay and get creative with the effect.