仅使用CSS更改颜色几秒钟

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

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

---

这个（）是我到目前为止所拥有的。它的工作原理与我上面描述的一样，但我觉得这种使用

动画的方式并不直观，也很难理解。为此，我应该坚持使用JavaScript吗？有哪些替代方案？
CSS动画不允许在帧与帧之间进行即时、非转换的更改，但实际上，您可以通过将关键帧设置得彼此非常接近，以至于中间帧几乎不可能进入（）来实现此效果：

我通过
动画
得到了这个。它的工作原理完全符合您的要求，唯一的问题是页面加载后，该框在一秒钟内呈黄色

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

这是

必须使用动画的另一个参数：
动画迭代计数
作为
1

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
动画。
我认为这只有使用javascript或jquery才能实现。您最好的选择是使用带有timer@Gert实际上，它只使用CSS（请参阅更新的JSFIDLE），但它有点像“黑客”，我正在寻找一种更好的方法。你觉得什么是“不直观的”？这是唯一一种（我知道的）能满足你要求的方法；而且，尽管您可能会发现它“不直观”，但我强烈怀疑它比使用JavaScript进行
setTimeout
/
setInterval
调用更直观。
div:hover {
    animation: myfirst 2s 1;
}

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