一、实现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的动画出做滚动，不过可操控性和便捷性都不如用JS了。代码如下：<pre t="code" l="html">ltstyle*{padding:0margin:0}
scroll{width:246pxheight:369pxoverflow:hiddenborder:solid 1px 666}
scroll ul{width:738pxoverflow:hiddenanimation:scroll 10s linear infinite}
@keyframes scroll{0%{transform:translate(0,0)}50%{transform:translate(-246px,0)}100%{transform:translate(-492px,0)}}
scroll li{width:246pxfloat:leftlist-style:none}
scroll img{width:246pxheight:369px}
lt/style
ltdiv id=scroll
ltul
lt/ul
lt/div
通过 CSS3的animation，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
大概的过程是这样的：...
a(this).addClass("animated").find(".aninode").each(function() {
a(this).addClass(a(this).attr("data-animate"))
})
...
页面滚动到每个 section 元素的时候，先给它加个名为 animated 的 class ，在这样的 section 内部找到 class 名为 aninode 的 div 元素。这样的 div 元素或者其内部的元素会有个 data-animate="a-****" 的属性。把这个属性的值，也就是 a-**** 也当做 class 名称传给这个 div 元素或者其内部的元素。这个 class 里面就包含有动画样式。也就是说，通过 class="animated" 当做钩子，有 animated 这个 class 的时候，名为 aninode 的 div 元素或者其内部的元素才会执行相关的动画效果。
动画效果的 CSS 样式在 core.js 里面。控制动画执行是在 baomi.js 里面。
其实这个页面可以再完善下 section 元素 move 出屏幕的时候，去掉 animated；当move 回来的时候再加上 animated。目前的情况是，滚动到页面最低下以后，再往上滚动页面，就看不见动画效果了
