Css动画步数vs立方贝塞尔

我在我的页面中使用了一个css动画，它使元素在Y轴上旋转：

@keyframes rotateony {
100% { 
  transform: perspective(120px) rotateY(0deg);
  -webkit-transform: perspective(120px) rotateY(-360deg) ;
  }
}
#testdiv {
animation: rotateony 2.4s infinite linear;
}

但是我的页面在移动设备上有点滞后，这是唯一的动画元素，没有运行背景java。我试图提高整个页面的性能，我读到你需要以60fps的同步性为目标，所以我认为通过使用

animation: rotateony 2.4s infinite steps(144); /*144 = 2.4*60 => 60fps) */

或

我可以强制浏览器使帧与设备刷新率同步。 这真的能提高性能吗？从视觉上看，我分不清这三个词之间的区别。如何提高此动画的性能？我试着用智能手机上的chrome inspet设备来测试它，但是chrome调试器本身会使页面变慢，并且不能很好地估计实际帧速率

animation: rotateony 2.4s infinite steps(72); /*72 = 2.4*30 => 30fps */