CSS旋转动画上的像素跳跃

Question

So I've been trying this form challenge involving using no JS for interactive elements and I decided to make it 'fancy'. On click, the form drops and the arrow rotates; however, you can notice a jump in the pixels. I've viewed the box model several times and all of the pixels add up - I have no idea where this jump comes from. The only way to stop it is to make the arrow absolute, but it still isn't making sense why exactly that's happening if there's no shift in the layout. Any ideas?

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

^^^ The above is some of the sample styling as I'm not allowed to post CodePen without code.

Answer 1

I'm not sure what the native frame rate for css animations is but it's not fast enough. In animation the minimum frame rate needed to create the illusion of seamless movement is 24 fps. Using a requestanimationframe() would bump it up to 60 but then you'd need JS. I found this article on medium about CSS smooth animations. Might help? https://medium.com/outsystems-experts/how-to-achieve-60-fps-animations-with-css3-db7b98610108

Answer 2

I'm going to preface this by saying it seems quite smooth to me on a 2017 Macbook Pro using Chrome 72.

That said, almost all CSS animation jankiness on basic transforms can be improved by tricking the browser into using the GPU thread to render the element instead of the CPU. You can do that by forcing a 3d transform.

.animatedElement {
   transform: translateZ(0);
}

Flickers and jumps in Chrome and FF can often be fixed with backface-visibility and perspective . Remember to use browser prefixes or a build tool that adds them.

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

On their own, these don't do anything visually but they trick the browser renderer into doing some additional calculations.