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