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

Question

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

编辑:也许更有针对性,我应该问:为什么在动画上应用'转发'会阻止更改特定的样式？

编辑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.根据定义,它将元素的视觉样式设置为动画的最后一个关键帧:

转发
动画结束后(由动画迭代计数确定),动画将在动画结束时应用属性值.

MDN的定义更加明确:

转发
目标将保留执行期间遇到的最后一个关键帧设置的计算值.遇到的最后一个关键帧取决于animation-direction和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>

Answer 2

引自CSS动画工作草案

CSS动画会影响计算属性值.在执行动画期间,属性的计算值由动画控制.这将覆盖正常样式系统中指定的值.动画会覆盖所有常规规则,但会被!important规则覆盖.

并进一步向下(动画持续时间):

[...]并且向前填充的动画将保留在100%关键帧处指定的值,即使动画是瞬时的.此外,动画事件仍然被触发.

当你动画时,background它默认不能被覆盖(除了!重要规则).如果你不想使用!important你应该去LcSalazar的答案.(目前只有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>