css - 悬停时的@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/