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

Posted 2023-03-06

【中文标题】CSS3 Perspective() 动画在鼠标快速移动时表现怪异

【英文标题】：CSS3 Perspective() animation acting weird on fast mouse move

【发布时间】：2017-10-07 17:56:15

【问题描述】：

透视动画 我正在玩 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>

【参考方案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 转换，因此在您的情况下不会触发此逻辑。

【讨论】：

很好看，先生，当首先声明perspective 到类本身时，它确实做了它应该做的事情！