CSS3实现元素闪烁动画效果

CSS3实现元素闪烁动画效果

利用CSS3的Animation特性：

@-webkit-keyframes twinkling{ /*定义透明度从0渐变到1*/
0%{
opacity:0; /*初始透明度设为0*/
     }
100%{
opacity:1; /*结束透明度设为1*/
    }
  }

$(element).css({"-webkit-animation":"twinkling 1s infinite ease-in-out"}); //为指定元素element添加闪烁动画

或者直接在CSS样式表中添加以下代码：

#element{
-webkit-animation: twinkling 1s infinite ease-in-out; 
 }

实现过程相当简单。实际上，使用CSS3制作动画效果比Flash或JavaScript更为便捷。希望各大浏览器能尽快全面支持CSS3 Animation。目前，基于WebKit内核的浏览器（如Safari、Chrome）已提供支持。