CSS3 Perspective() 动画在鼠标快速移动时表现怪异

Question

透视动画
我正在玩 css perspective() 动画。然而，在 Chrome 和 Opera 中测试它时，我遇到了一些奇怪的行为。

Chrome 和 Opera 在 animation 上反复快速悬停时表现得很奇怪。 animation 在 :hover 上触发。也许这是导致行为的原因？我怎样才能阻止 Chrome 和 Opera 出现这种行为。

Fiddle
我在 fiddle 中重现了这个问题。就像显示红点一样。

body {
  text-align: center;
}

.container {
  position: relative;
  height: 200px;
  width: 200px;
  margin: 0 auto;
  border: 2px solid red;
}

.perspective {
  background: blue;
  height: 200px;
  width: 200px;
  transition: transform .33s;
}

.perspective:hover {
  transform: perspective( 800px ) rotateY(15deg);
}

.perspective p {
  margin: 0;
  color: #fff;
  text-align: center;
  line-height: 200px;
}

.mouse-helper {
  position: absolute;
  height: 90px;
  width: 15px;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
 -moz-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 -o-transform: translate(-50%, -50%);
}

.mouse-helper .animated {
  background: red;
  position: absolute;
  bottom: 0px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  
  animation: up-down .29s infinite;
}

@keyframes up-down {
  0% {bottom: 0;top: calc(100% - 15px);}
  50% {top: 0;bottom: calc(100% - 15px);}
  100% { bottom: 0;top: calc(100% - 15px); }
}

<h2>Move with you mouse over the box like the red DOT does.</h2>
<p>You will see that the `perspective` animation will act very wierd on Chrome and Opera. On firefox and IE it works fine.</p>
<p>NOTE: Don't do it over the red dot itself, do it near the dot or any other size of the shape.</p>
<div class="container">
  <div style="overflow: hidden;">
    <div class="perspective">
      <p>TEXT</p>
    </div>
  </div>
  <div class="mouse-helper">
    <div class="animated"></div>
  </div>
</div>

Answer 1

我的猜测，但这只是一个猜测，这与 this issue thread 中的响应有关，其中一些转换是硬件加速的，而另一些不是，这可能会导致事情不同步简要地。

如果您明确地将 transform: perspective(0px) rotateY(0deg); 添加到您的（非 hovered）.perspective，它不会发生：

body {
  text-align: center;
}

.container {
  position: relative;
  height: 200px;
  width: 200px;
  margin: 0 auto;
  border: 2px solid red;
}

.perspective {
  background: blue;
  height: 200px;
  width: 200px;
  transition: transform .33s;
  transform: perspective(0px) rotateY(0deg);
}

.perspective:hover {
  transform: perspective( 800px ) rotateY(15deg);
}

.perspective p {
  margin: 0;
  color: #fff;
  text-align: center;
  line-height: 200px;
}

.mouse-helper {
  position: absolute;
  height: 90px;
  width: 15px;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
 -moz-transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 -o-transform: translate(-50%, -50%);
}

.mouse-helper .animated {
  background: red;
  position: absolute;
  bottom: 0px;
  height: 15px;
  width: 15px;
  border-radius: 50%;
  
  animation: up-down .29s infinite;
}

@keyframes up-down {
  0% {bottom: 0;top: calc(100% - 15px);}
  50% {top: 0;bottom: calc(100% - 15px);}
  100% { bottom: 0;top: calc(100% - 15px); }
}

<h2>Move with you mouse over the box like the red DOT does.</h2>
<p>You will see that the `perspective` animation will act very wierd on Chrome and Opera. On firefox and IE it works fine.</p>
<p>NOTE: Don't do it over the red dot itself, do it near the dot or any other size of the shape.</p>
<div class="container">
  <div style="overflow: hidden;">
    <div class="perspective">
      <p>TEXT</p>
    </div>
  </div>
  <div class="mouse-helper">
    <div class="animated"></div>
  </div>
</div>

这就是你的解决办法；至于 "why?"，再次猜测：上面链接的 Chromium 问题来自 Chromium 开发人员：

Alternatively we may be able to pull transform animations back to the main thread in this case.

We already do this (at least in M33) for animations where keyframes reference both accelerated and non-accelerated properties:

也许现在的转换也是如此（问题是从 2014 年开始的），但是因为非悬停状态没有 any 转换，所以这个逻辑不会在你的情况下触发。

CSS3 Perspective() 动画在鼠标快速移动时表现怪异

CSS3 Perspective() animation acting weird on fast mouse move

html

css

google-chrome

animation

opera