Question

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

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

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

Answer 1

这是可能的，但需要一些数学！

以下是 Fiddle

您必须使用另一个动画参数：animation-iteration-count作为1

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

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

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

0s＆gt;红
  1s>黄色（此处停留2秒）
  3s>黄
  4s>红色

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

<强>更新

以下是 Fiddle ，js来控制css动画。

Answer 2

CSS动画没有明确允许帧到帧的瞬时，非转换变化，但是你可以通过设置关键帧彼此接近来实现实际效果，使得干预帧实际上不可能进入（forked jsFiddle）：

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

Answer 3

我用animation得到了这个。它完全按照你的要求工作，唯一的问题是页面加载后盒子是黄色一秒钟。

http://jsfiddle.net/4TcMP/1/

仅使用CSS更改颜色几秒钟

3 个答案: