html - CSS旋转动画上的像素跳跃

Question

所以我一直在尝试这种不使用 JS 交互元素的形式挑战，我决定让它变得“花哨”。单击时，表单下降，箭头旋转；但是，您会注意到像素的跳跃。我看过盒子模型好几次，所有的像素都加起来了——我不知道这个跳跃是从哪里来的。阻止它的唯一方法是使箭头成为绝对箭头，但如果布局没有变化，为什么会发生这种情况仍然没有意义。有什么想法吗？

https://codepen.io/mtbroomell/pen/zeMYdb

.ins {
  display: block;
  text-shadow: 
    20px 0 0 rgba(255,0,0,.6), 
    -20px 0 0 rgba(0,255,0,.6), 
    0 20px 0 rgba(0,0,255,.6);
  font-size: 200px;
  line-height:1;
  color: transparent;
  transform: rotate(0deg);
  transition: .5s;
}
.form-toggle:checked ~ .ins-wrap .ins {
    text-shadow: 
    0 0 0 rgba(0,0,0,.5), 
    0 0 0 rgba(0,0,0,.5), 
    0 0 0 rgba(0,0,0,.5);
    transition: .5s;
    transform: rotate(90deg);
}

^^^ 以上是一些示例样式，因为我不允许在没有代码的情况下发布 CodePen。

Answer 1

我要先说这对我来说在使用 Chrome 72 的 2017 Macbook Pro 上看起来相当流畅。

也就是说，通过诱使浏览器使用 GPU 线程而不是 CPU 来渲染元素，几乎所有基本变换上的 CSS 动画卡顿都可以得到改善。您可以通过强制进行 3d 变换来做到这一点。

.animatedElement {
   transform: translateZ(0);
}

Chrome 和 FF 中的闪烁和跳跃通常可以通过 backface-visibility 和 perspective 来修复。请记住使用浏览器前缀或添加它们的构建工具。

.animatedElement {
  backface-visibility: hidden;
  perspective: 1000;
}

它们本身并没有在视觉上做任何事情，但它们会诱使浏览器渲染器进行一些额外的计算。