Chrome中有时会跳过CSS转换

2023年9月25日 299次阅读

我想在悬停在它上面时用旋转动画翻转图像(参见下面的代码).将鼠标悬停在图像上时,它会绕x轴旋转一秒钟(当鼠标离开图像时返回).

动画在Firefox和Safari中按预期工作.但是,Chrome有时会跳过动画并立即翻转图像.我不知道如何可靠地重现问题,因为它通常在跳过动画之前工作几次.我录制了一段视频,所以你可以看到我的意思：https://www.youtube.com/watch?v=bpgi46F_5RU

这个CSS有问题吗？我首先怀疑它是由旋转角度引起的,但即使使用其他类型的动画也会出现同样的问题.

.flippable-container {
  float: left;
  perspective: 1000px;
}

.flippable {
  transition: transform 1s;
}

.flippable-container:hover .flippable {
  transform: rotateX(180deg);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

<div class="flippable-container">
  <img class="flippable" src="http://lorempixel.com/200/200/food"/>
</div>

编辑：正如TylerH评论的那样,它看起来像Chrome中的一个错误.我在David Walsh这个着名的教程中看到了同样的问题：http://davidwalsh.name/css-flip.视频：https://www.youtube.com/watch?v=o_TViH4AmZ8.该问题必须与鼠标交互有关,因为图像下方的“切换翻转”按钮工作正常.

最佳答案 我通过在所有可翻转项目上放置一个z-index和position：relative来解决这个问题.我不知道为什么会影响它,但它似乎完成了这项工作.

例如：http://jsfiddle.net/L0duLu3c/2/

.flippable-container {
float: left;
perspective: 1000px;

}
.flippable {
    transition: 0.6s;
    z-index:10;
    position:relative;
    transform: rotateX(0deg);
}
.flippable-container:hover .flippable {
    transform: rotateX(180deg);
    z-index:20;
}
点赞