how to animate icon fa-circle using CSS to look as recording video blinking red dot?

Question

I have this red icon in CSS:

<div><i class="fa fa-circle text-danger"></i>&nbsp; LIVE </div>

How can I animate it to blink on an interval?

You remember in webcams and recorders cameras you can see a red dot blinking when is actually recording? I want the same effect, how can I do that in CSS? is it hard?

For example: http://jsbin.com/loxayazega/edit?html,output

Answer 1

Try using this CSS:

you can change blinker 1.5s value to control blinking speed.

.Blink {
    animation: blinker 1.5s cubic-bezier(.5, 0, 1, 1) infinite alternate;  
}

@keyframes blinker {  
  from { opacity: 1; }
  to { opacity: 0; }
}

See JsFiddle. I hope it works for you, thanks.