如何使用CSS动画图标fa-circle作为录制视频闪烁红点？

Question

我在CSS中有这个红色图标：

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

如何设置动画以间隔闪烁？

你还记得在网络摄像机和录像机中你可以看到实际录制时红点闪烁吗？我想要同样的效果，我怎么能在CSS中做到这一点？这很难吗？

例如： http://jsbin.com/loxayazega/edit?html,output

Answer 1

尝试使用此CSS：

您可以更改blinker 1.5s值以控制闪烁速度。

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

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

见JsFiddle。 我希望它适合你，谢谢。