Question

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

Chrome和Opera在animation上快速重复悬停时表现得非常奇怪。 animation会触发:hover。也许这是造成这种行为的？如何阻止Chrome和Opera出现此行为。

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

＆＃13;

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); }
}

＆＃13;

<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>

＆＃13;

Answer 1

我的猜测，但这只是猜测，这与this issue thread中的响应有关，其中一些转换是硬件加速而有些则不是，这可能会导致事情发生短暂同步。

如果您明确将transform: perspective(0px) rotateY(0deg);添加到您的（非hover ed）.perspective，则不会发生这种情况：

＆＃13;

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); }
}

＆＃13;

<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>

＆＃13;

所以有你的修复;关于＆＃34;为什么？＆＃34;再一次猜测：上面链接的Chromium问题来自Chromium开发：

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

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

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

CSS3 Perspective（）动画在快速鼠标移动时表现得很奇怪

1 个答案: