CSSアニメーションGPU処理サンプル(transform)

.ball {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: red;
  will-change: animation;
  animation: a 1s linear infinite alternate;
}

@keyframes a {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(300px);
  }
}