css - @keyframes when hovering

Question

What I'm trying to do: I have links in a black box. I'm trying to make the background of the box turn from black to blue when hovering. I'm not sure how to do this. Here is my CSS (I have it set to 5s but I really want it to take effect when hovering)

@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;
}

![]picture of link box1

Answer 1

If you just want to just animate one time from one color to another, you should use transitions instead of animations:

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

In action: http://jsfiddle.net/ExplosionPIlls/bZXB8/