已用于动画的 CSS 属性不能用于 chrome 中的悬停

Question

如果我将 CSS 属性用于 css 动画，并且如果我也将该属性用于悬停效果，在谷歌浏览器中，悬停将不起作用。

这是动画代码：

@keyframes fadeInUpBig {
  0% {
    -webkit-transform: translateY(2000px);
    -ms-transform: translateY(2000px);
    transform: translateY(2000px);
  }

  100% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
}

.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

这是悬停代码：

.sImg:hover{
    opacity: 1 !important;
    @include scale(1.2);
}

一个工作演示（底部的 5 个圆形图像应在悬停时缩放。）：http://secret-temple-3539.herokuapp.com/

Answer 1

将transform 添加到容器div 而不是img 标记，如下所示，它应该可以按照您的预期工作。

.sImgCont:hover {
    opacity: 1 !important;
    -webkit-transform: scale(1.2); /* for older versions, add other browser prefixes as you need */
    transform: scale(1.2);
}

或者，您可以将a 设为block（使用display: block）并将transform 添加到其中。 （最不喜欢的选项）

将transition 也添加到div 或a 以使转换更平滑。

我认为 Chrome (webkit) 不支持缩放非块元素（编辑：如提到的 here）。

编辑 2： 应该提到上述答案是您在 cmets 中提到的问题的一种可能解决方案。

对于您最初的问题，问题似乎出在 -webkit-animation-fill-mode 属性上。当animated 和fadeInUpBig 类一起使用时，值both 似乎实际上导致了问题。正如您在此fiddle 中看到的，当值更改为backwards 时，它工作正常。 （forwards 也不行）

编辑 3： 这是另一个更简单的fiddle，可以帮助您理解。在此，您会看到我已经应用了两种转换（一种通过初始动画，另一种在悬停时），您会发现填充模式为向前/两者都不会在悬停时执行转换，而向后执行的转换。

我唯一的解释是因为forwards 和both 都使div 保持其最终状态，这是一个已经转换的状态，因此它上面的另一个状态没有被采用。然而，backwards 模式将 div 恢复到其在转换之前/不转换之前的原始位置（即 0px），因此能够接受在悬停时指定的转换。

可能的原因是，在 CSS 中，对于一个元素，只能同时指定/存在一个转换属性（尝试在同一个类中给出两个不同的 -webkit-transform 行，看看只有一个会生效）和因此，当您尝试对已处于转换状态的元素应用新转换时，它不起作用。

注意：这不是一个确定的答案，但我将其留在这里，因为该分析可能会在将来对某人有所帮助。