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樣式的直接改變。
這樣就成功的實現了之前動畫的停止與後來樣式的變化。