Chrome中有时会跳过CSS过渡 [英] CSS transition is sometimes skipped in Chrome

问题描述

我想在悬停时使用旋转动画翻转图像（请参阅下面的代码）。当鼠标悬停在图像上时，它围绕x轴旋转一秒（当鼠标离开图像时返回）。

动画在Firefox中按预期工作，苹果浏览器。但是，Chrome有时会跳过动画并立即翻转图像。我不知道如何可靠地重现该问题，因为在跳过动画之前它通常会工作几次。我录制了一段视频，因此您可以查看我的意思： https://www.youtube.com / watch？v = bpgi46F_5RU

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

.flippable-container {float：left;透视：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 =flippablesrc =http://lorempixel.com/200/200/food/>< / div>  

编辑：正如TylerH评论的那样，它看起来像Chrome中的一个bug。我在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; 
职位：亲属; 
 transform：rotateX（0deg）; 
} 
 .flippable-container：hover .flippable {
 transform：rotateX（180deg）; 
 z-index：20; 
} 
  

I want to flip an image with a rotation animation when hovering over it (see the code below). When hovering over the image, it rotates around its x-axis for one second (and back when the mouse leaves the image).

The animation works as expected in Firefox and Safari. However, Chrome sometimes skips the animation and flips the image instantly. I don't know how to reliably reproduce the problem because it usually works a few times before the animation is skipped. I have recorded a video, so you can see what I mean: https://www.youtube.com/watch?v=bpgi46F_5RU

Is something wrong with this CSS? I first suspected that it's caused by the rotation angle but the same problem occurs even with other types of animations.

.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: As commented by TylerH, it looks like a bug in Chrome. I see the same problem in this well-known tutorial by David Walsh: http://davidwalsh.name/css-flip. Video: https://www.youtube.com/watch?v=o_TViH4AmZ8. The issue must be related to mouse interaction because the 'Toggle Flip' button below the image works fine.

解决方案

I have fixed this by putting a z-index and position:relative on all the flippable items. I have no idea why that would affect it but it seems to have done the job.

example: 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;
}

这篇关于Chrome中有时会跳过CSS过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！