100% {transform: rotate(360deg);}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
上方代码，我们通过一个黑色的长条div，旋转360度，耗时60s，分成60步完成。即可实现。
效果如下：
现在，我们要做下面这种效果：
PS：图片的url是upload/2018_02/1802181531733324.gif，图片较大，如无法观看，可在浏览器中单独打开。
为了作出上面这种效果，要分成两步。
（1）第一步：让鱼在原地摆动
鱼在原地摆动并不是一张 gif动图，她其实是由很多张静态图间隔地播放，一秒钟播放完毕，就可以了：
上面这张大图的尺寸是：宽 509 px、高 2160 px。
我们可以理解成，每一帧的尺寸是：宽 509 px、高 270 px。270 * 8 = 2160。让上面这张大图，在一秒内从 0px 的位置往上移动2160px，分成8步来移动。就可以实现了。
代码是：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>.shark{width:509px;height:270px;/*盒子的宽高是一帧的宽高*/border:1pxsolid#000;margin:100pxauto;background:url(images/shark.png)lefttop;/* 让图片一开始位于 0 px的位置 */animation: sharkRun 1s steps(8) infinite;/* 一秒之内，从顶部移动到底部，分八帧， */}
@keyframes sharkRun {0%{}/* 270 * 8 = 2160 */
100% {background-position:left-2160px;/* 动画结束时，让图片位于最底部 */}
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</div>
</body>
</html>
效果如下：
我们不妨把上面的动画的持续时间从1s改成 8s，就可以看到动画的慢镜头：
这下，你应该恍然大悟了。
（2）第二步：让鱼所在的盒子向前移动。
实现的原理也很简单，我们在上一步中已经让shark这个盒子实现了原地摇摆，现在，让 shark 所在的父盒子 sharkBox向前移动，即可。完整版代码是：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.shark {
width: 509px;
height: 270px; /* 盒子的宽高是一帧的宽高 */
border: 1px solid #000;
margin: 100px auto;
background: url(images/shark.png) left top; /* 让图片一开始位于 0 px的位置 */
animation: sharkRun 1s steps(8) infinite; /* 一秒之内，从顶部移动到底部，分八帧 */
}
/* 鱼所在的父盒子 */
.sharkBox {
width: 509px;
height: 270px;
animation: sharkBoxRun 20s linear infinite;
}
@keyframes sharkRun {
0% {
}
/* 270 * 8 = 2160 */
100% {
background-position: left -2160px; /* 动画结束时，让图片位于最底部 */
}
}
@keyframes sharkBoxRun {
0% {
transform: translateX(-600px);
}
100% {
transform: translateX(3000px);
}
}
</style>
</head>
<body>
<div>
<div></div>
</div>
</div>
</body>
</html>
大功告成。
工程文件可以到Linux公社资源站下载：
------------------------------------------分割线------------------------------------------
具体下载目录在 /2018年资料/2月/18日/CSS3动画特效图文详解（附代码）/
------------------------------------------分割线------------------------------------------