CSS3 animation动画
1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线 linear(匀速) | ease(缓冲) | steps(步数)
5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n(自定义次数) | infinite(无限次)
7、animation-direction 动画结束后是否反向还原 normal(不还原)|alternate(反向还原)
8、animation-play-state 动画状态 paused(停止)|running(运动)
9、animation-fill-mode 动画前后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用)
10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性
案例1：风车旋转：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>风车旋转</title><style type="text/css">@keyframes rotating{from{transform:rotate(0deg);/*0度*/}to{transform:rotate(360deg);}}.zhuan{display:block;width:400px;height:400px;margin:50px auto 0;animation:rotating 2s linear infinite;}</style></head><body><img src="images/fengche.png" alt="风车图片" class="zhuan"></body></html>
案例2：loading动画效果：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">@keyframes loading{from{transform:scale(1,1);/*x，y均为原长*/}to{transform:scale(1,0.5);/*x不变，y缩放为原来的0.5倍*/}}.con{width:300px;height:158px;border:1px solid #000;margin:150px auto 0;}.con div{width:30px;height:100px;float:left;background-color:gold;margin:15px;border-radius:15px;animation:loading 500ms ease infinite alternate;}.con div:nth-child(1){background-color:red;}.con div:nth-child(2){background-color:green;animation-delay:100ms;/*比第一个div延迟100ms*/}.con div:nth-child(3){background-color:pink;animation-delay:200ms;}.con div:nth-child(4){background-color:lightgreen;animation-delay:300ms;}.con div:nth-child(5){background-color:lightblue;animation-delay:400ms;}.con p{text-align:center;}</style></head><body><div class="con"><div></div><div></div><div></div><div></div><div></div><p>loading...</p></div></body></html>
案例3：人物走路动画：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>走路动画</title><style type="text/css"> .box{width:120px;height:180px;border:1px solid #ccc; margin:50px auto 0;position:relative;overflow:hidden; }.box img{display:block;width:960px;height:182px;position: absolute;left:0;top:0;animation:walking 1.0s steps(8) infinite; /*图片里为8个分解动作，故8步走完一个循环*/ }@keyframes walking{from{left:0px;}to{left:-960px;/*图片宽度960px*/}}</style></head><body><div class="box"><img src="images/walking.png"></div></body></html>
