@keyframes徘徊

Question

當我試圖做的事： 我有一個黑盒子的鏈接。我試圖讓懸停的盒子背景從黑色變成藍色。我不知道如何做到這一點。這裏是我的CSS（我有它設置爲5秒，但我真的希望它徘徊時生效）

@keyframes navBox 
{ 
from {background: #000;} 
to {background: #1821BC;} 
} 

@-moz-keyframes navBox /* Firefox */ 
{ 
from {background: #000;} 
to {background: #1821BC;} 
} 

@-webkit-keyframes navBox /* Safari and Chrome */ 
{ 
from {background: #000;} 
to {background: #1821BC;} 
} 

nav li 
{ 
animation: navBox 5s; 
-moz-animation: navBox 5s; 
-webkit-animation: navBox 5s; 
} 

！[]鏈接框的圖片1

Answer 1

如果你只是想只是動畫一次從一種顏色到另一個，你應該使用的過渡，而不是動畫：

nav li { 
    -webkit-transition: color 1s; 
    transition: color 1s; 
} 
nav li:hover { 
    color: blue; 
} 

在行動：http://jsfiddle.net/ExplosionPIlls/bZXB8/