CSS3，我们可以创建动画，它可以取代许多网页动画图像，例如下面这个小球动画
使用css3关键帧动画可以轻松实现
请看下面代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>关键帧动画</title>
</head>
<style type="text/css"> @keyframes move {
10%{
transform: translate(50px,50px)
}
30%{
transform: translate(150px,150px) scale(1.5);
}
50%{
transform: translate(250px,150px) scale(1);
}
70%{
transform: translate(350px,250px) scale(2);
}
100%{
transform: translate(0px,0px) scale(1);
}
} @-webkit-keyframes move {
10%{
-webkit-transform: translate(50px,50px)
}
30%{
-webkit-transform: translate(150px,150px) scale(1.5)
}
50%{
-webkit-transform: translate(250px,150px) scale(1)
}
70%{
-webkit-transform: translate(350px,250px) scale(2)
}
100%{
-webkit-transform: translate(0px,0px) scale(1)
}
} .box{
width: 30px;
height: 30px;
background-color: pink;
border-radius: 50%; /* 规定 @keyframes 动画的名称 */
animation-name:move;
-webkit-animation-name:move;
-o-animation-name:move;
-ms-animation-name:move;
-moz-animation-name:move;
/* 规定动画完成一个周期所花费的秒 默认是 0 */
animation-duration:1s;
-webkit-animation-duration:1s;
-o-animation-duration:1s;
-ms-animation-duration:1s;
-moz-animation-duration:1s;
/* 规定动画的速度曲线。默认是 "ease" */
animation-timing-function: linear;
-webkit-animation-timing-function: linear;
-o-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-moz-animation-timing-function: linear;
/* 规定动画何时开始。默认是 0 */
animation-delay: 0;
-webkit-animation-delay: 0;
-o-animation-delay: 0;
-ms-animation-delay: 0;
-moz-animation-delay: 0;
/* 规定动画被播放的次数。默认是 1 */
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
} </style>
<body>
<div class="box"></div>
</body>
</html>
动画类型不仅仅局限于 translate（平移） 还可以是 scale（缩放）rotate（旋转）等