Question

在CSS动画完成元素运行后，如果:hover等伪状态指定的样式更改是否有效？

编辑：也许更有针对性，我应该问：为什么要应用＆＃39;转发＆＃39;在动画上阻止更改特定的样式更改？

编辑2：事实证明这实际上是一个跨浏览器问题。例如。 Chrome（我运行的是版本38.0.2125.111）行为不正确，但Firefox会根据规范对其进行处理。

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

这是一个减少：

＆＃13;

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

＆＃13;

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

＆＃13;

我无法找到与此相关的信息，规格中没有任何内容：http://www.w3.org/TR/css3-animations/

有人知道a）这应该是可能的吗？ b）一旦动画结束，如何让悬停状态对元素起作用？

Answer 1

A）

关于为什么会这样，我无法确定。但它显然与animation-fill-mode属性相关，您将其设置为forwards。根据定义，它将元素的视觉样式设置为动画的最后一个关键帧：

<强>转发
动画结束后（由动画迭代计数确定），动画将应用动画结束时的属性值。

MDN's definition更清楚一点：

<强>转发
目标将保留由执行期间遇到的最后一个关键帧设置的计算值。遇到的最后一个关键帧取决于animation-direction和animation-iteration-count的值：

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

b）中

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

引自CSS Animations Working Draft

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

然后再向下（Animation Duration）：

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

在动画background时，默认情况下无法覆盖（除了！重要规则）。如果您不想使用!important，请访问LcSalazar's answer。（目前只有Firefox按照规范[2014年11月6日]中的描述做出反应）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

其实我真的不明白你的问题，可能你需要这样的效果吗？ 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;
}

但是，使用这些代码，当您将鼠标移出文本时，动画将会重播。

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

3 个答案: