1.superballs {
2  --uib-size: 45px;
3  --uib-speed: 1.1s;
4  --uib-color: #3b3b23;
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}
12
13.superballs__dot {
14  position: absolute;
15  top: 0;
16  left: 0;
17  display: flex;
18  align-items: center;
19  justify-content: center;
20  height: 100%;
21  width: 100%;
22}
23
24.superballs__dot::before {
25  content: '';
26  height: 30%;
27  width: 30%;
28  border-radius: 50%;
29  background-color: var(--uib-color);
30  will-change: transform;
31  flex-shrink: 0;
32}
33
34.superballs__dot:nth-child(1) {
35  transform: rotate(45deg);
36}
37
38.superballs__dot:nth-child(1)::before {
39  animation: orbit82140 var(--uib-speed) linear calc(var(--uib-speed) * -0.143)
40    infinite;
41}
42
43.superballs__dot:nth-child(2) {
44  transform: rotate(-45deg);
45}
46
47.superballs__dot:nth-child(2)::before {
48  animation: orbit82140 var(--uib-speed) linear calc(var(--uib-speed) / -2)
49    infinite;
50}
51
52@keyframes orbit82140 {
53  0% {
54    transform: translate(calc(var(--uib-size) * 0.5)) scale(0.73684);
55    opacity: 0.65;
56  }
57
58  5% {
59    transform: translate(calc(var(--uib-size) * 0.4)) scale(0.684208);
60    opacity: 0.58;
61  }
62
63  10% {
64    transform: translate(calc(var(--uib-size) * 0.3)) scale(0.631576);
65    opacity: 0.51;
66  }
67
68  15% {
69    transform: translate(calc(var(--uib-size) * 0.2)) scale(0.578944);
70    opacity: 0.44;
71  }
72
73  20% {
74    transform: translate(calc(var(--uib-size) * 0.1)) scale(0.526312);
75    opacity: 0.37;
76  }
77
78  25% {
79    transform: translate(0%) scale(0.47368);
80    opacity: 0.3;
81  }
82
83  30% {
84    transform: translate(calc(var(--uib-size) * -0.1)) scale(0.526312);
85    opacity: 0.37;
86  }
87
88  35% {
89    transform: translate(calc(var(--uib-size) * -0.2)) scale(0.578944);
90    opacity: 0.44;
91  }
92
93  40% {
94    transform: translate(calc(var(--uib-size) * -0.3)) scale(0.631576);
95    opacity: 0.51;
96  }
97
98  45% {
99    transform: translate(calc(var(--uib-size) * -0.4)) scale(0.684208);
100    opacity: 0.58;
101  }
102
103  50% {
104    transform: translate(calc(var(--uib-size) * -0.5)) scale(0.73684);
105    opacity: 0.65;
106  }
107
108  55% {
109    transform: translate(calc(var(--uib-size) * -0.4)) scale(0.789472);
110    opacity: 0.72;
111  }
112
113  60% {
114    transform: translate(calc(var(--uib-size) * -0.3)) scale(0.842104);
115    opacity: 0.79;
116  }
117
118  65% {
119    transform: translate(calc(var(--uib-size) * -0.2)) scale(0.894736);
120    opacity: 0.86;
121  }
122
123  70% {
124    transform: translate(calc(var(--uib-size) * -0.1)) scale(0.947368);
125    opacity: 0.93;
126  }
127
128  75% {
129    transform: translate(0%) scale(1);
130    opacity: 1;
131  }
132
133  80% {
134    transform: translate(calc(var(--uib-size) * 0.1)) scale(0.947368);
135    opacity: 0.93;
136  }
137
138  85% {
139    transform: translate(calc(var(--uib-size) * 0.2)) scale(0.894736);
140    opacity: 0.86;
141  }
142
143  90% {
144    transform: translate(calc(var(--uib-size) * 0.3)) scale(0.842104);
145    opacity: 0.79;
146  }
147
148  95% {
149    transform: translate(calc(var(--uib-size) * 0.4)) scale(0.789472);
150    opacity: 0.72;
151  }
152
153  100% {
154    transform: translate(calc(var(--uib-size) * 0.5)) scale(0.73684);
155    opacity: 0.65;
156  }
157}
158