用css3实现闪烁效果

1. css3 @keyframes

　　参考 css3 @keyframes规则.

　　特别注意浏览器支持:

　　　　Internet Explorer 10, Firefox, 和 Opera 支持 @keyframes 属性.

　　　　Safari和Chrome使用私有属性@-WebKit-keyframes支持。

　　　　注意:Internet Explorer 9及更早IE版本不支持@keyframes 属性.

　　w3school上关于浏览器支持的内容不正确 - 实测表明firefox支持@keyframes.

 

2. css3 animation属性

　　参考 w3school.

 

3. css 源码

　

@keyframes myAnimation {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}

div {
  animation: myAnimation 1s infinite
}

 

使用在线工具 pleeease 产生支持各浏览器的css代码.

 

@-webkit-keyframes myAnimation {
  0% {
    opacity: 0;
    filter: alpha(opacity=0)
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100)
  }
}

@keyframes myAnimation {
  0% {
    opacity: 0;
    filter: alpha(opacity=0)
  }
  100% {
    opacity: 1;
    filter: alpha(opacity=100)
  }
}

div {
  -webkit-animation: myAnimation 1s infinite;
          animation: myAnimation 1s infinite
}