1.ball {
2 --size: 20px;
3 --timing: 0.7s;
4 --displace: 70px;
5 border-radius: 50%;
6 width: var(--size);
7 height: var(--size);
8 background: #000;
9 margin-right: var(--displace);
10 animation: animation321 var(--timing) infinite alternate
11    cubic-bezier(0.68, -0.55, 0.265, 1.55);
12}
13
14@keyframes animation321 {
15 0% {
16  background: #4284f3;
17  transform: translateX(var(--displace));
18 }
19
20 100% {
21  background: #ea4335;
22  transform: translateX(00px);
23 }
24}
25