1.jelly {
2 --uib-size: 40px;
3 --uib-speed: .8s;
4 --uib-color: #2c2b2b;
5 position: relative;
6 height: calc(var(--uib-size) / 2);
7 width: var(--uib-size);
8 filter: url('#uib-jelly-ooze');
9 animation: rotate72317 calc(var(--uib-speed) * 2) linear infinite;
10}
11
12.jelly::before,
13.jelly::after {
14 content: '';
15 position: absolute;
16 top: 0%;
17 left: 25%;
18 width: 50%;
19 height: 100%;
20 background: var(--uib-color);
21 border-radius: 100%;
22}
23
24.jelly::before {
25 animation: shift-left var(--uib-speed) ease infinite;
26}
27
28.jelly::after {
29 animation: shift-right var(--uib-speed) ease infinite;
30}
31
32.jelly-maker {
33 width: 0;
34 height: 0;
35 position: absolute;
36}
37
38@keyframes rotate72317 {
39 0%,
40  49.999%,
41  100% {
42  transform: none;
43 }
44
45 50%,
46  99.999% {
47  transform: rotate(90deg);
48 }
49}
50
51@keyframes shift-left {
52 0%,
53  100% {
54  transform: translateX(0%);
55 }
56
57 50% {
58  transform: scale(0.65) translateX(-75%);
59 }
60}
61
62@keyframes shift-right {
63 0%,
64  100% {
65  transform: translateX(0%);
66 }
67
68 50% {
69  transform: scale(0.65) translateX(75%);
70 }
71}
72