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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.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);
  }
}