hovering时的@keyframes

Question

我正在尝试做什么： 我在黑匣子里有链接。我正试图让盒子的背景在悬停时从黑色变为蓝色。我不知道该怎么做。这是我的CSS（我把它设置为5s，但我真的希望它在悬停时生效）

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