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

如果在伪状态上指定了样式更改,例如：在动画完成CSS动画之后,hover工作在元素上？

编辑：也许更有针对性地,我应该问：为什么在动画上应用“转发”可以阻止更具体的风格改变而超越？

编辑2：事实证明,这实际上是一个跨浏览器的问题.例如. Chrome(我正在运行版本38.0.2125.111)的行为不正确,但Firefox会根据规格处理它.

长篇小说：根据规格(由下面的chrona引用)添加！重要的重写应该呈现风格.但是,目前,只有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)动画结束后如何使悬浮状态在元素上工作？

解决方法

> a)

关于为什么会发生这种情况,我无法确定.但这显然是与您设定转发的animation-fill-mode财产有关.根据定义,将元素的视觉样式设置为动画的最后一个关键帧：

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)

现在,关于如何使其正常工作,您可以从动画中删除forward属性.在这种情况下,您需要反转动画,因此元素的原始状态(动画结束并删除视觉效果)是要修复的颜色：

@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>

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

解决方法

猜你在找的CSS相关文章