只使用CSS在几秒钟内改变颜色-ChangecolorforsomesecondsusingonlyCSS

3  

It is possible, but requires some math!

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

Here is the Fiddle

这是小提琴

You must use another parameter of animation: animation-iteration-count as 1

您必须使用动画的另一个参数:动画-迭代-计数为1

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

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

This is going to perform a 4s animation with the following "key-frames":

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

0s > red
1s > yellow (stays 2 seconds here)
3s > yellow
4s > red

>红色1s >黄色(在这里停留2秒)3s >黄色4s >红色

The only problem is that the animation stops on mouse out. But you can use Javascript to activate the animation (by toggle a class), so the animation doesn't stops on mouse out.

唯一的问题是动画停止在鼠标上。但是您可以使用Javascript来激活动画(通过切换类)，因此动画不会停止在鼠标外。

Update:

更新:

Here is a Fiddle with js to control css animation.

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

1  

CSS animations don't explicitly allow instantaneous, non-transitioning changes from frame-to-frame, but you can achieve the effect in practice by setting keyframes so close to each other that it's practically impossible for an intervening frame to come in (forked jsFiddle):

CSS动画并没有明确地允许从帧到帧的即时、非转换更改，但是你可以通过设置关键帧来达到实际效果，这些关键帧之间的距离如此之近，以至于几乎不可能插入一个帧(叉形jsFiddle):

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

0  

I got this with animation. It works exactly as you asked, the only problem is that after page load the box is yellow for a second.

我是用动画制作的。它完全按照您的要求工作，唯一的问题是在页面加载之后，该框暂时为黄色。

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

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