仅使用CSS更改颜色几秒钟

Question

是否可以在悬停状态下将div的颜色更改X秒钟，然后仅使用CSS返回其原始颜色？

我不希望颜色之间出现任何淡入淡出。例如，如果要在悬停时将div的颜色更改为黄色1秒钟，则必须将其保持黄色1秒钟，然后立即返回原始颜色。

到目前为止，这是（http://jsfiddle.net/hZ49y/1/）。它的工作方式如上所述，但我觉得这种使用animation方式不直观且难以理解。我是否应该坚持为此目的使用JavaScript？有哪些替代方案？

Answer 1

可能，但是需要一些数学运算！

这是小提琴

您必须使用动画的另一个参数：animation-iteration-countas1

div:hover {
    animation: myfirst 2s 1;
}

@keyframes myfirst
{
    0%      {background:red;}
    25%     {background:yellow;}
    75%     {background:yellow;}
    100%    {background:red;}
}

这将使用以下“关键帧”执行 4s动画：

0s>红色
1s>黄色（在这里停留2秒）
3s>黄色
4s>红色

唯一的问题是动画会在鼠标移出时停止。但是您可以javascript用来激活动画（通过切换类），因此动画不会在鼠标移出时停止。

更新：

这里是一个小提琴与js来控制css动画。