动画 css3 【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标签上就可以生效啦！

推荐文章