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.