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

Question

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

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

小提琴
我在小提琴中重现了这个问题。就像 红点 显示的那样。

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>

这就是你的解决方法；至于“为什么？”，再次猜测：上面链接的 Chromium 问题来自 Chromium 开发人员：

在这种情况下，我们也可以将变换动画拉回主线程。

对于关键帧同时引用加速和非加速属性的动画，我们已经这样做了（至少在 M33 中）：

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