首页 文章

Chrome中有时会跳过CSS转换

提问于
浏览 次
4

我想在悬停在它上面时用旋转动画翻转图像（参见下面的代码） . 当悬停在图像上时，它围绕其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>

Edit: 由TylerH评论，它看起来像Chrome中的一个错误 . 我在David Walsh这个着名的教程中看到了同样的问题：http://davidwalsh.name/css-flip . 视频：https://www.youtube.com/watch?v=o_TViH4AmZ8 . 该问题必须与鼠标交互相关，因为图像下方的'Toggle Flip'按钮工作正常 .

css google-chrome css-transitions prefixfree

1 回答

  • 2

    我通过在所有可翻转项目上放置一个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;
}
    回复于

相关问题