html - CSS3 Perspective() 动画在鼠标快速移动时表现得很奇怪

Question

透视动画
我正在玩弄 css perspective() 动画。但是，在 Chrome 和 Opera 中对其进行测试时，我遇到了一些奇怪的行为。

Chrome 和 Opera 在 动画 上反复快速悬停时表现得很奇怪。 动画 在: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); 到您的(非悬停ed).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>

这就是您的解决方法；至于“为什么？”，又是一个猜测:上面链接的 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 年开始的)，但是因为非悬停状态没有任何转换，所以在您的情况下不会触发此逻辑。