@-webkit-keyframes indexframe { 0% {background-color:#000000color:#FFFFFF} 50% {background-color:#FFFFFFcolor:#000000} 100% {background-color:#000000color:#FFFFFF} } #index_href { -webkit-animation: indexframe 8s infinitedisplay:blockposition:relativetop:400pxleft:180pxwidth:200pxheight:80pxborder-radius:15pxtext-align:centerline-height:80pxfont-style:italicfont-size:24pxtext-decoration:nonecolor:#FFFFFFbackground-color:#000000opacity:0.5}
为了方便，也就写了兼容chrome的css3样式，其他的换个前缀就好，在这里就不过多的说了。
2、为这个a（id=“index_href”）添加一个伪类：
这是原本准备添加的：
#index_href:hover { background-color:#ffffffcolor:#000000opacity:0.5}
但是运行之后发现动画因为设置的是
infinite //无限循环的效果
所以当需要触发伪类的效果时，动画还是会依然进行，这时候就需要停止之前的无限循环的动画了。
用css3的思路就是重新设置一个伪类的动画，把前面的动画给覆盖了。这样的话，我们就可以把伪类要改变的东西设置为动画效果，然后直接覆盖上去就行了。代码如下：
#index_href:hover { -webkit-animation:indexend 0scolor:#000000opacity:0.5} @-webkit-keyframes indexend { 0% {background:#000000} 100% {background:#FFFFFF} }
这里重新定义一个动画，命名为indexend，然后添加到hover伪类中去，设置动画的过渡时间为0s，这样可以达到瞬间变道动画的结束样式，以达到hover样式的直接改变。
这样就成功的实现了之前动画的停止与后来样式的变化。
一、实现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
规定是否应该轮流反向播放动画。
1，看代码参考。2，animation-fill-mode : none | forwards | backwards | both
none：不改变默认行为。forwards ：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。backwards：在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。both：向前和向后填充模式都被应用。
