css-animation

在学习ssm项目时发现某个页面中的提示性文字实现了闪烁效果,觉得很有趣查看了下源码:

.warning span{
animation:emo .5s linear infinite alternate;
-webkit-animation:emo .5s linear infinite alternate;　　　　/* Safari and Chrome */
-moz-animation:emo .5s linear infinite alternate;　　　　　/* Firefox */　　　　
-o-animation:emo .5s linear infinite alternate;　　　　　　 /* Opera */
}
@keyframes emo{
from {opacity:0;}
to {opacity:1;}
}
@-webkit-keyframes emo{　　
from {opacity:0;}
to {opacity:1;}
}
@-moz-keyframes emo{
from {opacity:0;}
to {opacity:1;}
}
@-o-keyframes emo{
from {opacity:0;}
to {opacity:1;}
}

通过搜索发现是通过css3动画属性实现的,使用@keyframes定义动画,其中opacity为设置元素的不透明级别,通过animation属性绑定到需要产生效果的元素.

animation有6个动画属性

语法为: animation: name duration timing-function delay iteration-count direction;