opacity 是CSS3中:设置元素的不透明度的属性(支持ie8以上)
opacity: value|inherit;
value用于规定不透明度。从 0.0 (完全透明)到 1.0(完全不透明)。
img { opacity:0.4; filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */ }
@keyframes是CSS3 规则:实现过渡动画的方式 (支持ie10以上)
在动画过程中,通过更改css样式,实现从一个CSS样式设定到另一个
设定从变化从0%~100%
0%是开头动画,100%是当动画完成。(也有用 from to关键字的)
animation属性来控制动画的外观,还使用选择器绑定动画。(声明动画名称)
keyframes-selector:用来划分动画的时长,可以使用百分比0%~100%形式,也可以使用 "from" 和 "to"的形式。
语法结构:
@keyframes animationname{keyframes-selector {css-styles;}}
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
Firefox需要前缀-moz-
Opera需要前缀-o-
图标闪动:
1 @keyframes twinkling{/*透明度由0到1*/ 2 0%{ 3 opacity:0; 4 color:#ef0000; 5 } 6 100%{ 7 opacity:1; 8 color:#ef0000; 9 } 10 } 11 @-moz-keyframes twinkling{/*火狐浏览器*/ 12 0%{ 13 opacity:0; 14 color:#ef0000; 15 } 16 100%{ 17 opacity:1; 18 color:#ef0000; 19 } 20 21 } 22 23 @-webkit-keyframes twinkling{ /*Safari 和 Chrome*/ 24 0%{ 25 opacity:0; 26 color:#ef0000; 27 } 28 100%{ 29 opacity:1; 30 color:#ef0000; 31 } 32 33 } 34 @-o-keyframes twinkling{ 35 0%{ 36 opacity:0; 37 color:#ef0000; 38 } 39 100%{ 40 opacity:1; 41 color:#ef0000; 42 } 43 }
未完待续
$(".icon-bell").css({"animation":"twinkling 1s infinite ease-in-out"});
setInterval(function(){ $(".c-icon-bell").fadeOut(500).fadeIn(500); },200);