http://www.w3chtml.com/css3/rules/@keyframes.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>@keyframes_CSS参考手册_web前端开发参考手册系列</title>
<style>
#sport{position:relative;500px;height:400px;border:1px solid #ddd;}
#staff{position:absolute;z-index:3;bottom:10px;left:10px;overflow:hidden;180px;height:8px;border-radius:3px;background:#ddd;line-height:20;
-moz-animation:staff 3s linear;
-webkit-animation:staff 3s linear;
-o-animation:staff 3s linear;
-ms-animation:staff 3s linear;
animation:staff 3s linear;
}
#ball{position:absolute;z-index:3;bottom:20px;left:90px;overflow:hidden;30px;height:30px;border-radius:15px;box-shadow:0 0 10px rgba(204,102,0,.8);background:#F6D66E;background:-moz-linear-gradient(top,#fff,#F6D66E);background:-webkit-linear-gradient(top,#fff,#F6D66E);background:-o-linear-gradient(top,#fff,#F6D66E);background:-ms-linear-gradient(top,#fff,#F6D66E);background:linear-gradient(top,#fff,#F6D66E);line-height:20;
-moz-animation:ball 3s linear;
-webkit-animation:ball 3s linear;
-o-animation:ball 3s linear;
-ms-animation:ball 3s linear;
animation:ball 3s linear;
}
@-moz-keyframes ball{
0%{-moz-transform:translate(0,0);}
5%{-moz-transform:translate(-90px,-100px);}
18%{-moz-transform:translate(0,-350px);}
35%{-moz-transform:translate(200px,0);}
46%{-moz-transform:translate(380px,-160px);}
60%{-moz-transform:translate(250px,-350px);}
78%{-moz-transform:translate(60px,0);}
100%{-moz-transform:translate(0,0);}
}
@-webkit-keyframes ball{
0%{-webkit-transform:translate(0,0);}
5%{-webkit-transform:translate(-90px,-100px);}
18%{-webkit-transform:translate(0,-350px);}
35%{-webkit-transform:translate(200px,0);}
46%{-webkit-transform:translate(380px,-160px);}
60%{-webkit-transform:translate(250px,-350px);}
78%{-webkit-transform:translate(60px,0);}
100%{-webkit-transform:translate(0,0);}
}
@-o-keyframes ball{
0%{-o-transform:translate(0,0);}
5%{-o-transform:translate(-90px,-100px);}
18%{-o-transform:translate(0,-350px);}
35%{-o-transform:translate(200px,0);}
46%{-o-transform:translate(380px,-160px);}
60%{-o-transform:translate(250px,-350px);}
78%{-o-transform:translate(60px,0);}
100%{-o-transform:translate(0,0);}
}
@-ms-keyframes ball{
0%{-ms-transform:translate(0,0);}
5%{-ms-transform:translate(-90px,-100px);}
18%{-ms-transform:translate(0,-350px);}
35%{-ms-transform:translate(200px,0);}
46%{-ms-transform:translate(380px,-160px);}
60%{-ms-transform:translate(250px,-350px);}
78%{-ms-transform:translate(60px,0);}
100%{-ms-transform:translate(0,0);}
}
@keyframes ball{
0%{transform:translate(0,0);}
5%{transform:translate(-90px,-100px);}
18%{transform:translate(0,-350px);}
35%{transform:translate(200px,0);}
46%{transform:translate(380px,-160px);}
60%{transform:translate(250px,-350px);}
78%{transform:translate(60px,0);}
100%{transform:translate(0,0);}
}
@-moz-keyframes staff{
0%{-moz-transform:translate(0,0);}
6%{-moz-transform:translate(260px,0);}
20%{-moz-transform:translate(300px,0);}
30%{-moz-transform:translate(300px,0);}
40%{-moz-transform:translate(200px,0);}
65%{-moz-transform:translate(40px,0);}
79%{-moz-transform:translate(0,0);}
100%{-moz-transform:translate(0,0);}
}
@-webkit-keyframes staff{
0%{-webkit-transform:translate(0,0);}
6%{-webkit-transform:translate(260px,0);}
20%{-webkit-transform:translate(300px,0);}
30%{-webkit-transform:translate(300px,0);}
40%{-webkit-transform:translate(200px,0);}
65%{-webkit-transform:translate(40px,0);}
79%{-webkit-transform:translate(0,0);}
100%{-webkit-transform:translate(0,0);}
}
@-o-keyframes staff{
0%{-o-transform:translate(0,0);}
6%{-o-transform:translate(260px,0);}
20%{-o-transform:translate(300px,0);}
30%{-o-transform:translate(300px,0);}
40%{-o-transform:translate(200px,0);}
65%{-o-transform:translate(40px,0);}
79%{-o-transform:translate(0,0);}
100%{-o-transform:translate(0,0);}
}
@-ms-keyframes staff{
0%{-ms-transform:translate(0,0);}
6%{-ms-transform:translate(260px,0);}
20%{-ms-transform:translate(300px,0);}
30%{-ms-transform:translate(300px,0);}
40%{-ms-transform:translate(200px,0);}
65%{-ms-transform:translate(40px,0);}
79%{-ms-transform:translate(0,0);}
100%{-ms-transform:translate(0,0);}
}
@keyframes staff{
0%{transform:translate(0,0);}
6%{transform:translate(260px,0);}
20%{transform:translate(300px,0);}
30%{transform:translate(300px,0);}
40%{transform:translate(200px,0);}
65%{transform:translate(40px,0);}
79%{transform:translate(0,0);}
100%{transform:translate(0,0);}
}
</style>
</head>
<body>
<div id="sport">
<span id="ball">弹球</span>
<span id="staff">滑杆</span>
</div>
</body>
</html>