.container{--uib-size:45px;--uib-color:#000;--uib-speed:1.75s;align-items:flex-end;display:flex;height:calc(var(--uib-size)*.6);justify-content:space-between;padding-bottom:20%;width:var(--uib-size)}.cube{animation:jump var(--uib-speed) ease-in-out infinite;flex-shrink:0;height:calc(var(--uib-size)*.2);width:calc(var(--uib-size)*.2)}.cube__inner{animation:morph var(--uib-speed) ease-in-out infinite;background-color:var(--uib-color);border-radius:25%;display:block;height:100%;transform-origin:center bottom;transition:background-color .3s ease;width:100%}.cube:nth-child(2){animation-delay:calc(var(--uib-speed)*-.36)}.cube:nth-child(2) .cube__inner{animation-delay:calc(var(--uib-speed)*-.36)}.cube:nth-child(3){animation-delay:calc(var(--uib-speed)*-.2)}.cube:nth-child(3) .cube__inner{animation-delay:calc(var(--uib-speed)*-.2)}@keyframes jump{0%{transform:translateY(0)}30%{animation-timing-function:ease-out;transform:translateY(0)}50%{animation-timing-function:ease-in;transform:translateY(-200%)}75%{animation-timing-function:ease-in;transform:translateY(0)}}@keyframes morph{0%{transform:scaleY(1)}10%{transform:scaleY(1)}20%,25%{animation-timing-function:ease-in-out;transform:scaleY(.6) scaleX(1.3)}30%{animation-timing-function:ease-in-out;transform:scaleY(1.15) scaleX(.9)}40%{transform:scaleY(1)}70%,85%,to{transform:scaleY(1)}75%{transform:scaleY(.8) scaleX(1.2)}}