1、首先我们创建一个简单的项目，如图所示包括html，css和img三个。
2、这里是html文件，引入css和html代码文件，如图所示。
3、这里是css文件代码，上面是div和图片显示的效果代码，后面是动画效果。
4、这里是事件，这里定义了四个时间段的状态，兼容了ie的。
5、如图所示这里是效果图，会根据时间轮播显示下一张图片 了。
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
*{padding:0margin:0border:0}
.left{width:50%float:left
animation:myfirst 5s
-moz-animation:myfirst 5s/* Firefox */
-webkit-animation:myfirst 5s/* Safari and Chrome */
-o-animation:myfirst 5s/* Opera */
}
.right{width:50%float:left
animation:myfirst 5s
-moz-animation:myfirst 5s/* Firefox */
-webkit-animation:myfirst 5s/* Safari and Chrome */
-o-animation:myfirst 5s/* Opera */
animation-delay: 5s/* W3C 和 Opera */
-moz-animation-delay: 5s/* Firefox */
-webkit-animation-delay: 5s/* Safari 和 Chrome */
}
@keyframes myfirst
{
0% { opacity:0}
100% { opacity:1}
}
@-moz-keyframes myfirst /* Firefox */
{
0% { opacity:0}
100% { opacity:1}
}
@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0% { opacity:0}
100% { opacity:1}
}
@-o-keyframes myfirst /* Opera */
{
0% { opacity:0}
100% { opacity:1}
}
</style>
</head>
<body>
<div>
<div class="left"><img src="images/xxx.jpg"></div>
<div class="right">文字XXXXXXXXXXXXXXXXXXXXXXXX </div>
</div>
</body>
</html>
戳这里，或者复制下面：
<!DOCTYPE html><html>
<head>
<title>css逐帧动画</title>
<meta charset="utf-8" />
</head>
<style>
body{text-align: center}
#box{
width: 81px
height: 240px
margin: 0 auto
outline: 1px #ccc solid
background: url(你那张图.jpg) 0 0 no-repeat
}
#box:hover{
animation: test 0.5s steps(1, start) infinite
/*steps设为1，你设的6会直接过到图片最后*/
}
/*定义名为test的动画，你这个图有6帧就是每20%播放一帧，把每帧位移值都算好填进去*/
@keyframes test{
0% {background-position: 0 0}
20% {background-position: -70px 0}
40% {background-position: -145px 0}
60% {background-position: -230px 0}
80% {background-position: -300px 0}
100% {background-position: -400px 0}
}/*你那个图处理得不好，每个图占的位置不是等距，中间空白没留够，有一帧出现了旁边一帧的手*/
</style>
<body>
<div id="box">Oyeah</div>
</body>
