html - 用于动画的 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)并添加转换 到它。 (最不喜欢的选项)

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

我认为 Chrome (webkit) 不支持缩放非 block 元素(编辑:如前所述 here )。

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

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

编辑 3:这是另一个更简单的 fiddle这可能会帮助你理解。在这里，您会看到我应用了两种转换(一种通过初始动画，另一种在悬停时)，您会发现填充模式为向前/两者都不会在悬停时执行转换，而具有向后的则执行转换。

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

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

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