Question

如果我使用CSS属性进行css动画，并且如果我也使用该属性进行悬停效果，则在Google Chrome中，悬停将无效。

这是动画代码：

@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：应该提到上述答案是您在评论中提到的问题的一种可能解决方案。

对于您的原始问题，问题似乎与-webkit-animation-fill-mode属性有关。当both和animated类同时使用时，值fadeInUpBig似乎实际上会导致问题。正如您在fiddle中看到的那样，当值更改为backwards时，它可以正常工作。（forwards也不起作用）

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

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

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

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

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

1 个答案: