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

我不确定CSS动画的本机帧速率是多少，但是速度不够快。在动画中，产生无缝运动错觉所需的最小帧速率为24 fps。使用requestanimationframe（）会将其提高到60，但是您需要JS。我在有关CSS平滑动画的媒体上找到了这篇文章。可能有帮助？ https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108

Answer 2

在此之前，我先说一下，在使用Chrome 72的2017年Macbook Pro上，这对我来说似乎很流畅。

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

.animatedElement {
   transform: translateZ(0);
}

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

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

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

CSS旋转动画上的像素跳跃

2 个答案: