We are going to make use of text-shadow property and opacity property.
Smooth flickering effect
Let’s create a simple and smooth flickering effect first.
It will just a need any text in any tag. We’ll just add h1 tag and “flick” as texts.
Let’s add the style to make it clearly visible in dark background.
Now, all we need to do is add animation using @keyframes rule.
A bit uneven flickering effect
That’s what flickering effect actually is. An uneven and sudden sharp movement. This example doesn’t have that sharp effect but you can always change the @keyframes rules to adjust the effect.
For a little bit uneven effect all we need to do is change the @keyframes rule.
Here’s the modified example:
Here’s another example of text-shadow property.
animation examples style text-shadow