1html {
2 min-width: 500px;
3 min-height: 500px;
4 height: 100%;
5 background-image:
6 radial-gradient(
7 white 55%,
8 #222 57%
9 ),
10 linear-gradient(
11 white,
12 white
13 ),
14 linear-gradient(
15 57deg,
16 #222 50%,
17 white 0
18 ),
19 linear-gradient(
20 -57deg,
21 #222 50%,
22 white 0
23 ),
24
25 radial-gradient(
26 #222 55%,
27 transparent 57%
28 ),
29 linear-gradient(
30 57deg,
31 transparent 50%,
32 #222 0
33 ),
34 linear-gradient(
35 -57deg,
36 transparent 50%,
37 #222 0
38 ),
39 linear-gradient(
40 #222,
41 #222
42 );
43 background-position:
44 50% -100%,
45 0 0,
46 200% 0,
47 -100% 0,
48
49 50% -100%,
50 200% 0,
51 -100% 0,
52 0 0;
53 background-size:
54 10em 10em,
55 100% 0,
56 50% 100%,
57 50% 100%,
58
59 10em 10em,
60 50% 100%,
61 50% 100%,
62 100% 0;
63 background-repeat: no-repeat;
64 animation: 4s sliding-ball infinite;
65 }
66
67@keyframes sliding-ball {
68 0% {
69 background-position:
70 50% -100%,
71 0 0,
72 200% 0,
73 -100% 0,
74
75 50% -100%,
76 200% 0,
77 -100% 0,
78 0 0 ;
79 background-size:
80 10em 10em,
81 100% 0,
82 50% 100%,
83 50% 100%,
84
85 10em 10em,
86 50% 100%,
87 50% 100%,
88 100% 0;
89 }
90 6% {
91 background-position:
92 50% -100%,
93 0 0,
94 200% 0,
95 -100% 0,
96
97 50% 50%,
98 200% 0,
99 -100% 0,
100 0 0;
101 background-size:
102 10em 10em,
103 100% 0,
104 50% 100%,
105 50% 100%,
106
107 10em 10em,
108 50% 100%,
109 50% 100%,
110 100% 0;
111 }
112 8% {
113 background-position:
114 50% -100%,
115 0 0,
116 200% 0,
117 -100% 0,
118
119 50% 45%,
120 200% 0,
121 -100% 0,
122 0 0;
123 background-size:
124 10em 10em,
125 100% 0,
126 50% 100%,
127 50% 100%,
128
129 10em 10em,
130 50% 100%,
131 50% 100%,
132 100% 0;
133 }
134 10% {
135 background-position:
136 50% -100%,
137 0 0,
138 200% 0,
139 -100% 0,
140
141 50% 52%,
142 200% 0,
143 -100% 0,
144 0 0;
145 background-size:
146 10em 10em,
147 100% 0,
148 50% 100%,
149 50% 100%,
150
151 10em 10em,
152 50% 100%,
153 50% 100%,
154 100% 0;
155 }
156 12% {
157 background-position:
158 50% -100%,
159 0 0,
160 200% 0,
161 -100% 0,
162
163 50% 50%,
164 200% 0,
165 -100% 0,
166 0 0;
167 background-size:
168 10em 10em,
169 100% 0,
170 50% 100%,
171 50% 100%,
172
173 10em 10em,
174 50% 100%,
175 50% 100%,
176 100% 0;
177 }
178 25% {
179 background-position:
180 50% -100%,
181 0 0,
182 200% 0,
183 -100% 0,
184
185 50% 50%,
186 200% 0,
187 -100% 0,
188 0 0;
189 background-size:
190 10em 10em,
191 100% 0,
192 50% 100%,
193 50% 100%,
194
195 10em 10em,
196 50% 100%,
197 50% 100%,
198 100% 0;
199 }
200 40% {
201 background-position:
202 50% -100%,
203 0 0,
204 200% 0,
205 -100% 0,
206
207 50% 70%,
208 100% 100%,
209 0% 100%,
210 0 0;
211 background-size:
212 10em 10em,
213 100% 0,
214 50% 100%,
215 50% 100%,
216
217 10em 5em,
218 50% 50%,
219 50% 50%,
220 100% 50%;
221 }
222 50% {
223 background-position:
224 50% -100%,
225 0 0,
226 200% 0,
227 -100% 0,
228
229 50% calc(100% + 10em),
230 200% 200%,
231 -100% 200%,
232 0 0;
233 background-size:
234 10em 10em,
235 100% 0,
236 50% 100%,
237 50% 100%,
238
239 20em 5em,
240 50% 50%,
241 50% 50%,
242 100% 100%;
243 }
244 /**/
245 55% {
246 background-position:
247 50% 50%,
248 0 0,
249 200% 0,
250 -100% 0,
251
252 50% calc(100% + 10em),
253 200% 200%,
254 -100% 200%,
255 0 0;
256 background-size:
257 10em 10em,
258 100% 0,
259 50% 100%,
260 50% 100%,
261
262 20em 5em,
263 50% 50%,
264 50% 50%,
265 100% 100%;
266 }
267 57% {
268 background-position:
269 50% 45%,
270 0 0,
271 200% 0,
272 -100% 0,
273
274 50% calc(100% + 10em),
275 200% 200%,
276 -100% 200%,
277 0 0;
278 background-size:
279 10em 10em,
280 100% 0,
281 50% 100%,
282 50% 100%,
283
284 20em 5em,
285 50% 50%,
286 50% 50%,
287 100% 100%;
288 }
289 59% {
290 background-position:
291 50% 52%,
292 0 0,
293 200% 0,
294 -100% 0,
295
296 50% calc(100% + 10em),
297 200% 200%,
298 -100% 200%,
299 0 0;
300 background-size:
301 10em 10em,
302 100% 0,
303 50% 100%,
304 50% 100%,
305
306 20em 5em,
307 50% 50%,
308 50% 50%,
309 100% 100%;
310 }
311 61% {
312 background-position:
313 50% 50%,
314 0 0,
315 200% 0,
316 -100% 0,
317
318 50% calc(100% + 10em),
319 200% 200%,
320 -100% 200%,
321 0 0;
322 background-size:
323 10em 10em,
324 100% 0,
325 50% 100%,
326 50% 100%,
327
328 20em 5em,
329 50% 50%,
330 50% 50%,
331 100% 100%;
332 }
333 68% {
334 background-position:
335 50% 50%,
336 0 0,
337 200% 0,
338 -100% 0,
339
340 50% calc(100% + 10em),
341 200% 200%,
342 -100% 200%,
343 0 0;
344 background-size:
345 10em 10em,
346 100% 0,
347 50% 100%,
348 50% 100%,
349
350 20em 5em,
351 50% 50%,
352 50% 50%,
353 100% 100%;
354 }
355 83% {
356 background-position:
357 50% 70%,
358 0 0,
359 100% 100%,
360 0% 100%,
361
362 50% calc(100% + 10em),
363 200% 200%,
364 -100% 200%,
365 0 0;
366 background-size:
367 10em 5em,
368 100% 50%,
369 50% 50%,
370 50% 50%,
371
372 20em 5em,
373 50% 50%,
374 50% 50%,
375 100% 100%;
376 }
377 100% {
378 background-position:
379 50% calc(100% + 10em),
380 0 0,
381 200% 200%,
382 -100% 200%,
383
384 50% calc(100% + 10em),
385 200% 200%,
386 -100% 200%,
387 0 0;
388 background-size:
389 20em 5em,
390 100% 100%,
391 50% 50%,
392 50% 50%,
393
394 20em 5em,
395 50% 50%,
396 50% 50%,
397 100% 100%;
398 }
399 }