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

我将在2017年使用Chrome 72的Macbook Pro上对我说起来相当顺利。

也就是说，几乎所有关于基本变换的CSS动画jankiness都可以通过欺骗浏览器使用GPU线程来渲染元素而不是CPU来改进。您可以通过强制进行3D变换来实现。

.animatedElement {
   transform: translateZ(0);
}

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

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

就其本身而言，它们不会在视觉上做任何事情，但它们会欺骗浏览器渲染器进行一些额外的计算。

Answer 2

我不确定css动画的原生帧速率是多少，但速度不够快。在动画中，创建无缝移动幻觉所需​​的最小帧速率为24 fps。使用requestanimationframe（）会将其提升到60但是你需要JS。我发现这篇关于CSS平滑动画的文章。可能有帮助？ https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108