一、实现CSS3无限循环动画代码示例。
代码如下：
CSS:
@-webkit-keyframes gogogo {
0%{
-webkit-transform: rotate(0deg)
border:5px solid red
}
50%{
-webkit-transform: rotate(180deg)
background:black
border:5px solid yellow
}
100%{
-webkit-transform: rotate(360deg)
background:white
border:5px solid red
}
}
.loading{
border:5px solid black
border-radius:40px
width: 28px
height: 188px
-webkit-animation:gogogo 2s infinite linear
margin:100px
}
扩展资料实现动画无限循环所需要的CSS属性说明：
1、infinite
在animation后面加上infinite就可以无限循环，另外还可以做反向循环使用animation-direction
2、animation-name
规定需要绑定到选择器的 keyframe 名称。
3、animation-duration
规定完成动画所花费的时间，以秒或毫秒计。
4、animation-timing-function
规定动画的速度曲线。
5、animation-delay
规定在动画开始之前的延迟。
6、animation-iteration-count
规定动画应该播放的次数。
7、animation-direction
规定是否应该轮流反向播放动画。
既然楼主的问题竟然一年没找到满意答案……不才刚刚开始学css3，愿意跟楼主分享一下图片切换心得。 如果楼主现在已经找到了解决方案，那请楼主无视我的答案。
首先，lp52761十五级大神的答案貌似不是很确切，其实css3+html5非常强大，基本上可以脱离js，除非要做出能响应移动设备触屏事件的网站，或者我的观点也落伍了，html5+css3也可以做出触屏响应特效。
我看csdn右侧图片切换有点类似opacity的变化，那么楼主不妨用keyframes方法在opacity上做文章；例如：
先定义一个keyframe
@keyframes qiehuan {
30%{opacity:1}
60%{opacity:0}
}
之后为图片容器做一个类：
.container{
/*这里长宽高边框边距之类的东西你自己随便写。*/
}
然后为你的图片们定义专属类：
.tupianmen{
position:absolute
//此处调用keyframe方法
animation:qiehuan 20s infinite
opacity:0
}
然后用css3独有的nth-child选择器来选择你要切换的图片
img:nth-child(4){animation-delay:0s}
img:nth-child(3){animation-delay:5s}
img:nth-child(2){animation-delay:10s}
img:nth-child(1){animation-delay:15s}
接下来你就可以写html了：
<!DOCTYPE html>
<html>
...... 略掉杂七杂八的东西......
<div class="container">
<img class="tupianmen" src="你的图片1" />
<img class="tupianmen" src="你的图片2" />
<img class="tupianmen" src="你的图片3" />
<img class="tupianmen" src="你的图片4" />
</div>
</html>
写完之后保存，查看效果如何
对了，差点忘了，如果用不同浏览器的话，可能需要简单更改一下keyframe或者animation的前缀，比如加一个-webkit-才行。
望采纳。。。
