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>
