come animare l'icona fa-circle usando i CSS per apparire come un video rosso lampeggiante?

Question

Ho questa icona rossa in CSS:

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

Come posso animare a lampeggiare su un intervallo?

Si ricorda nelle telecamere webcam e registratori è possibile vedere un punto rosso lampeggiante quando è in realtà in registrazione? Voglio lo stesso effetto, come posso farlo in CSS? è difficile?

Ad esempio: http://jsbin.com/loxayazega/edit?html,output

Answer 1

Provare a utilizzare questo CSS:

è possibile modificare blinker 1.5s valore di controllare il lampeggiamento velocità.

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

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

Vedi JsFiddle. Spero che funzioni per te, grazie.