【CSS】记录一个简单的使用css animation完成警告灯闪烁效果

效果如下，非常简单，也很容易实现，做动图的网址丢了就截个图吧，这种简单的渐变效果使用css就可以完成。

@keyframes flashing {
  from {
    background: red;
  }
  50% {
    background: transparent;
  }
  from {
    background: red;
  }
}
.alarmOn {
  background: red;
  border-radius: 50%;
  animation: flashing 2000ms infinite ease-in-out;
}

flashing 是自己定义的名字，CSS3中添加的新属性animation是用来为元素实现动画效果的，但是animation无法单独担当起实现动画的效果。承载动画的另一个属性——@keyframes。使用的时候为了兼容可加上-webkit-、-o-、-ms-、-moz-、-khtml-等前缀以适应不同的浏览器。
创建动画是通过逐步改变从一个CSS样式设定到另一个。
指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。

infinite 是播放次数无限循环的意思
ease-in-out加速然后减速，这里设置的是闪烁的方式

将className=alarmOn 绑定在警报图片img标签上就可以生效啦！