@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/