CSS3使用animation 属性设置特效例子

 

Internet Explorer 10、Firefox 以及 Opera 支持 animation 属性。

Safari 和 Chrome 支持替代的 -webkit-animation 属性。

注释：Internet Explorer 9 以及更早的版本不支持 animation 属性。

 

div{
animation:xz 1s linear infinite ;//infinite为无限循环,可修改为数字次数

}
@keyframes xz{
from {transform:rotate(0deg);}
to{transform:rotate(360deg);}
}

 

div{
animation: load 0.5s infinite alternate;
}
@keyframes load {
0% {
box-shadow: inset 0px 0px 10px 5px rgba(255, 255, 255, 1), 0px 0px 10px 3px rgba(251, 207, 14, 0.5);
}
100% {
box-shadow: inset 0px 0px 10px 5px rgba(255, 255, 255, 1), 0px 0px 20px 3px rgba(251, 207, 14, 1);
}
}