Wie animiere ich Icon-Fa-Circle mit CSS, um als Videoaufnahme zu sehen blinkender roter Punkt?

Question

Ich habe dieses rote Symbol in CSS:

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

Wie kann ich es auf einem Intervall zu blinken animieren?

Sie erinnern sich in Webcams und Recorder Kameras können Sie einen roten Punkt blinken sehen, wenn die Aufnahme tatsächlich? Ich möchte den gleichen Effekt, wie kann ich das in CSS tun? ist es schwer?

Zum Beispiel: http://jsbin.com/loxayazega/edit?html,output

Answer 1

Versuchen Sie, diese mit CSS:

Sie blinker 1.5s Wert ändern Blinkgeschwindigkeit zu steuern.

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

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

Siehe JsFiddle. Ich hoffe, es funktioniert für Sie, danke.