css3中停止动画的方法

之前写了一个a标签，设置了css3无限循环的动画效果，但是后来加上伪类hover的时候发现动画依然在继续，伪类的效果根本显示不出来。然后去百度了一下，看着大多数都是用js进行动画的停止操作的，但是本人很懒，不喜欢为了一个动画去写js，就准备在css3上想想办法，把动画停止了。

1、首先给大家看看一个动画代码：（不是什么高大上的效果，只是简单的颜色变化）

@-webkit-keyframes indexframe
{
	0%		{background-color:#000000; color:#FFFFFF;}
	50%		{background-color:#FFFFFF; color:#000000;}
	100%	{background-color:#000000; color:#FFFFFF;}
}
#index_href
{
	-webkit-animation: indexframe 8s infinite;
    display:block;
	position:relative;
    top:400px;
	left:180px;
	width:200px;
	height:80px;
    border-radius:15px;
	text-align:center;
	line-height:80px;
	font-style:italic;
	font-size:24px;
	text-decoration:none;
    color:#FFFFFF;
	background-color:#000000;
	opacity:0.5;
}

为了方便，也就写了兼容chrome的css3样式，其他的换个前缀就好，在这里就不过多的说了。

2、为这个a（id=“index_href”）添加一个伪类：

这是原本准备添加的：

#index_href:hover
{
	background-color:#ffffff;
	color:#000000;
	opacity:0.5;
}

但是运行之后发现动画因为设置的是

infinite        //无限循环的效果

所以当需要触发伪类的效果时，动画还是会依然进行，这时候就需要停止之前的无限循环的动画了。

用css3的思路就是重新设置一个伪类的动画，把前面的动画给覆盖了。这样的话，我们就可以把伪类要改变的东西设置为动画效果，然后直接覆盖上去就行了。代码如下：

#index_href:hover
{
	-webkit-animation:indexend 0s;
	color:#000000;
	opacity:0.5;
}

@-webkit-keyframes indexend
{
	0% {background:#000000;}
	100% {background:#FFFFFF;}
}

这里重新定义一个动画，命名为indexend，然后添加到hover伪类中去，设置动画的过渡时间为0s，这样可以达到瞬间变道动画的结束样式，以达到hover样式的直接改变。

这样就成功的实现了之前动画的停止与后来样式的变化。