随着CSS3的发布，一些简单的动画我们不用借助javascript就可以实现，今天偶然看到@keyframes这个功能
1、动画使元素从一种形式逐渐变化为另一种形式
2、keyframes可以改变任意多样式，任意多次数
3、使用百分比来拆分动画过程或者使用from和 to，等同于0%和100%；建议使用百分数，功能强大。
4、0是动画的开始100%是动画的完成
5、使用百分数兼容性更强
6、使用@keyframes时一定要设置animation属性，第一个参数是动画名称，第二个参数是执行一次所用的时间，第三个参数是循环次数设置为infinite为无限循环，
第四个参数为动画的速度函数。
7、IE9以及更早版本不支持哦！
@keyframes spin{
0%{
transform:rotate(0);
}
100%{
transform:rotate(300deg);
}
}
div{
background:red;
width:20px;
height:100px;
animation:spin 8s infinite linear;
}
div:hover{
animation-play-state:paused;
}
下面是一个自定义动画，实现一个循环动画，一个方块沿正方形轨迹移动并改变颜色，一次循环完成后
会反向循环，再正向循环，如此反复。
<!DOCTYPE html>
<html>
<head>
<style>
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s infinite;
-webkit-animation:myfirst 5s infinite alternate;//alternate表示正向循环之后再反向循环
}
@keyframes myfirst{
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
@-webkit-keyframes myfirst {/* Safari and Chrome */
0% {background:red; left:0px; top:0px;}
25% {background:yellow; left:200px; top:0px;}
50% {background:blue; left:200px; top:200px;}
75% {background:green; left:0px; top:200px;}
100% {background:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
以上动画会无休止一直进行下去，无法启动和停止，通过设置animation-play-state：pasued；可以让动画停止，可以试一下哦！
4973
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
