1.momentum {
2 --uib-size: 40px;
3 --uib-speed: 1s;
4 --uib-color: rgb(221, 255, 242);
5 position: relative;
6 display: flex;
7 align-items: center;
8 justify-content: center;
9 height: var(--uib-size);
10 width: var(--uib-size);
11 animation: rotate01561 var(--uib-speed) linear infinite;
12}
13
14.momentum::before,
15.momentum::after {
16 content: '';
17 height: 25%;
18 width: 25%;
19 border-radius: 50%;
20 background-color: var(--uib-color);
21}
22
23.momentum::before {
24 animation: wobble290123 calc(var(--uib-speed) * 1.25) ease-in-out infinite;
25}
26
27.momentum::after {
28 animation: wobble9123 calc(var(--uib-speed) * 1.25) ease-in-out infinite;
29}
30
31.momentum::before {
32 margin-right: 10%;
33}
34
35@keyframes wobble9123 {
36 0%,
37  100% {
38  transform: translateX(0);
39 }
40
41 50% {
42  transform: translateX(calc(var(--uib-size) * 0.2)) scale(1.1);
43 }
44}
45
46@keyframes wobble290123 {
47 0%,
48  100% {
49  transform: translateX(0);
50 }
51
52 50% {
53  transform: translateX(calc(var(--uib-size) * -0.2)) scale(1.1);
54 }
55}
56
57@keyframes rotate01561 {
58 0% {
59  transform: rotate(0deg);
60 }
61
62 100% {
63  transform: rotate(360deg);
64 }
65}
66