题目：我们来实现一个最简单的需求，将一个元素从屏幕左边均匀地移动到屏幕右边。

一、CSS实现

用 css 实现是最合理也是最高效的，示例代码如下。

@keyframes move_animation1 {
  0% { left: 0px; }
  100% { left: calc(100% - 60px); }
}
@keyframes move_animation {
  0% { transform: translateX(0); }
  50% { transform: translateX(250px); }
  100% { transform: translateX(500px)); }    
}
.animate-div {
  width: 60px;
  height: 40px;
  border-radius: 5px;
  background: #92B901;
  left: 0;
  position: absolute;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  animation: move_animation 5s linear 2s infinite alternate;
}

注意：transform:translateZ(0); 用来开启 chrome GPU 加速，解决动画”卡顿”。在动画中使用 transform 比 left/top 性能更好，能减少浏览器 repaint。

二、JavaScript 实现

首先想到的是 setInterval/setTimeout，原理就是利用人眼的视觉残留和电脑屏幕的刷新，让元素以连贯平滑的方式逐步改变位置，最终实现动画的效果。

常用的屏幕刷新频率为 60Hz，一些电竞屏幕则为 144Hz。我们以常用的刷新频率为例࿰