css - 应该是:hover pseudo state style change work after CSS animation completes

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

• 一)

至于为什么会这样，我不能肯定地说。但它显然与animation-fill-mode有关您设置为 forwards 的属性。根据定义，将元素的视觉样式设置为动画的最后一个关键帧:

forwards
After the animation ends (as determined by its animation-iteration-count), the animation will apply the property values for the time the animation ended.

MDN's definition更清楚一点:

forwards
The target will retain the computed values set by the last keyframe encountered during execution. The last keyframe encountered depends on the value of animation-direction and animation-iteration-count:

但我不知道为什么它不允许 :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>