css--动画
一般我们都认为html+css只能创建静态页面，其实css3中已经可以创建动态页面。
这一章我们就来讲述一下如何通过css创建动画。
css中创建动画是通过@keyframes准则来标定的
规定动画的时长，规定动画的名称
首先我们还是通过程序来看一下。
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>动画效果</title> <link rel="stylesheet" type="text/css" href="donghua.css"> </head> <body> <div> 旋转起来吧！ </div> </body> </html>
css
div{ width:200px; height:200px; background-color: brown; position:relative; animation:anima 5s infinite alternate;//这一步就是为这个div设置动画属性，这个动画的名称是anima ，动画时长5s，执行次数是infinite（无数次），执行方式（循环） -webkit-animation: anima 5s infinite alternate;//这一步是为了让在chrome浏览器能够执行（兼容浏览器，如果你想让在其他浏览器支持，还要兼容其他浏览器。方式一样。
例如 -moz-animation：...啥的。） }
下面就是通过@keyframes来规定动画具体操作。 @keyframes anima { 0% { background-color: red; width: 200px; height: 200px; left: 0px;//如果设置了移动属性，那么div一定要设置成定位的。 top: 0px; } 25% { background-color: royalblue; width: 100px; height: 100px; left: 400px; top: 0px; } 50% { background-color: burlywood; width: 50px; height: 50px; left: 400px; top: 400px; } 75% { background-color: green; width: 100px; height: 100px; left: 0px; top: 400px; } 100% { background-color: red; width: 200px; height: 200px; left: 0px; top: 0px; } } @-webkit-keyframes anima { 0%{background-color: red;width:200px;height:200px;left:0px;top:0px; } 25%{background-color: royalblue;width:100px;height:100px;left:400px;top:0px; } 50%{background-color: burlywood;width:50px;height:50px;left:400px;top:400px; } 75%{background-color: green;width:100px;height:100px;left:0px;top:400px; } 100%{background-color: red;width:200px;height:200px;left:0px;top:0px; }
还有我们在设置动画属性时，至少要给出动画名称，动画时长。动画具体还有那些属性，请参考
w3c标准
div{
width:200px;
height:200px;
background-color: brown;
position:relative;
animation:anima 5s infinite alternate;
-webkit-animation: anima 5s infinite alternate;
}
@keyframes anima {
0% {
background-color: red;
width: 200px;
height: 200px;
left: 0px;
top: 0px;
}
25% {
background-color: royalblue;
width: 100px;
height: 100px;
left: 400px;
top: 0px;
}
50% {
background-color: burlywood;
width: 50px;
height: 50px;
left: 400px;
top: 400px;
}
75% {
background-color: green;
width: 100px;
height: 100px;
left: 0px;
top: 400px;
}
100% {
background-color: red;
width: 200px;
height: 200px;
left: 0px;
top: 0px;
}
}
@-webkit-keyframes anima {
0%{background-color: red;width:200px;height:200px;left:0px;top:0px;
}
25%{background-color: royalblue;width:100px;height:100px;left:400px;top:0px;
}
50%{background-color: burlywood;width:50px;height:50px;left:400px;top:400px;
}
75%{background-color: green;width:100px;height:100px;left:0px;top:400px;
}
100%{background-color: red;width:200px;height:200px;left:0px;top:0px;
}
