应该：在CSS动画完成后悬停伪状态样式更改工作

Question

在CSS动画完成对元素运行后，应该在伪状态（如:hover）上指定的样式更改是否应该工作？

编辑：也许更有针对性，我应该问：为什么在动画上应用“转发”会阻止重写更具体的样式更改？

编辑2：原来，这实际上是一个跨浏览器问题。例如。 Chrome浏览器（我正在运行版本38.0.2125.111）的行为不正确，但Firefox按照规范处理它。

长话短说：根据规格（如下面chrona引用）添加!important覆盖应呈现样式。但是，目前只有Firefox正确处理这个问题。

这里是还原：

@keyframes go { 
 
    0% { 
 
    background: green; 
 
    } 
 
    100% { 
 
    background: pink; 
 
    } 
 
} 
 

 
@-webkit-keyframes go { 
 
    0% { 
 
    background: green; 
 
    } 
 
    100% { 
 
    background: pink; 
 
    } 
 
} 
 

 
.box { 
 
    animation: go 3s forwards; 
 
    -webkit-animation: go 3s forwards; 
 
    
 
} 
 

 
.box:hover { 
 
    background: orange!important; 
 
    cursor: pointer; 
 
}

<div class="box">Hover states don't work after animation</div>

我无法找到在规范有关信息，没有之一：http://www.w3.org/TR/css3-animations/

任何人都知道，如果a）本应有可能吗？ b）一旦动画结束，如何让悬浮状态在元素上工作？

Answer 1

• 一）

关于它为什么会发生，我无法说出肯定的。但它显然与您设置为forwards的animation-fill-mode属性有关。也就是说，根据定义，设置元素的视觉风格是动画的最后一个关键帧：

转发
动画结束之后（如通过其动画迭代计数确定），动画将应用动画结束时的属性值。

MDN's definition是一个比较明确的：

前锋
目标将保留在执行过程中遇到的最后一个关键帧设置的计算值。遇到的最后一个关键取决于动画方向和价值动画迭代-数：

但我不知道为什么它不允许:hover状态来覆盖样式。

• B）

现在，如何使它工作，你可以从动画中删除forwards财产。在这种情况下，您需要反转动画，以便元素的原始状态（动画结束并消除视觉效果）是您希望它被修复的颜色：

@keyframes go { 
 
    0% { 
 
    background: pink; 
 
    } 
 
    100% { 
 
    background: green; 
 
    } 
 
} 
 

 
@-webkit-keyframes go { 
 
    0% { 
 
    background: pink; 
 
    } 
 
    100% { 
 
    background: green; 
 
    } 
 
} 
 

 
.box { 
 
    animation: go 2s; 
 
    -webkit-animation: go 2s; 
 
    -webkit-animation-direction: reverse; 
 
    animation-direction: reverse; 
 
    background: pink; 
 
} 
 

 
.box:hover { 
 
    background: orange; 
 
    cursor: pointer; 
 
}

<div class="box">Hover states don't work after animation</div>

Answer 2

其实我不是很了解你的问题，也许你需要这样的效果？ http://jsfiddle.net/abruzzi/5td8w6jx/

@keyframes go { 
    0% { 
     background: green; 
    } 
    100% { 
     background: pink; 
    } 
} 
@-webkit-keyframes go { 
    0% { 
     background: green; 
    } 
    100% { 
     background: pink; 
    } 
} 


.box { 
    animation: go 3s forwards; 
    -webkit-animation: go 3s forwards; 
} 
.box:hover { 
    -webkit-animation: none; 
    background: orange; 
    cursor: pointer; 
} 

然而，与这些代码，当你鼠标移出文本，动画将重播。

Answer 3

从CSS Animations Working Draft

CSS动画影响计算的属性值引用。在执行动画期间，属性的计算值由动画控制。这将覆盖常规样式系统中指定的值。 动画覆盖所有常规规则，但被重要规则重写。

和位进一步向下（Animation Duration）：

[...]和填充转发将保留在100％的关键帧中指定的值，即使动画是瞬间的动画。此外，动画事件仍然被解雇。

当您设置动画的background无法在默认情况下被覆盖（除！important规则）。如果你不想使用!important你应该去LcSalazar's answer。 （如规格说明目前只有Firefox的反应[2014年11月6日]）

@keyframes go { 
 
    0% { 
 
    background: green; 
 
    } 
 
    100% { 
 
    background: pink; 
 
    } 
 
} 
 

 
@-webkit-keyframes go { 
 
    0% { 
 
    background: green; 
 
    } 
 
    100% { 
 
    background: pink; 
 
    } 
 
} 
 

 
.box { 
 
    animation: go 3s forwards; 
 
    -webkit-animation: go 3s forwards; 
 
    
 
} 
 

 
.box:hover { 
 
    background: orange !important; 
 
    cursor: pointer; 
 
}

<div class="box">Hover states don't work after animation</div>