悬停时@keyframes答案

【问题标题】：@keyframes when hovering悬停时@keyframes
【发布时间】：2013-03-15 10:33:22
【问题描述】：

我正在尝试做的事情：我有一个黑盒子里的链接。我试图在悬停时使框的背景从黑色变为蓝色。我不知道该怎么做。这是我的 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

【问题讨论】：

标签： css css-transitions css-animations

【解决方案1】：

如果您只想从一种颜色到另一种颜色的动画，您应该使用过渡而不是动画：

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

实际操作中：http://jsfiddle.net/ExplosionPIlls/bZXB8/

【讨论】：