SCSS
.box {
$speed: 1.35s;
&::before {
content: "";
height: 4em;
width: 4em;
position: absolute;
top: 50%;
left: 50%;
margin: -2em 0 0 -2em;
background-color: #2ecc71;
animation: $speed bounce linear infinite
}
&::after {
//Shadow
content: "";
height: .5em;
width: 4em;
position: absolute;
bottom: 50%;
left: 50%;
margin: 0 0 -3.75em -2em;
border-radius: 100%;
background-color: #D1D5D8;
animation: ($speed / 2) shadow linear infinite
}
}
$bounceHeight: 2.125em;
@keyframes bounce {
0% {
transform: translateY(-$bounceHeight);
border-radius: 0;
} 12.5% {
border-radius: 0;
} 25% {
transform: translateY($bounceHeight) rotate(45deg);
border-bottom-right-radius: 100%;
} 37.5% {
border-radius: 0;
} 50% {
transform: translateY(-$bounceHeight) rotate(90deg);
border-radius: 0;
} 62.5% {
border-radius: 0;
} 75% {
transform: translateY($bounceHeight) rotate(135deg);
border-top-right-radius: 100%;
} 87.5% {
border-radius: 0;
} 100% {
transform: translateY(-$bounceHeight) rotate(180deg);
border-radius: 0;
}
}
@keyframes shadow {
0% {
width: 4em
} 50% {
width: 5.65685424949238em;
margin-left: -2.82842712474619em;
background-color: darkgrey
} 100% {
width: 4em
}
}
