Css动画跨越vs cubic-bezier

Question

我在页面中使用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) */

或

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

我可以强制浏览器使帧与设备刷新率同步。 这可以真正改善性能吗？在视觉上，我无法区分所有这三个之间的区别。如何改善此动画效果？我尝试使用我的智能手机上的chrome inspet设备对其进行测试，但是chrome调试器使页面本身滞后，并且不能很好地估计实际帧速率。