.animation-capsule-in {
    transform-origin: center bottom;
    animation: capsule_jumping 333ms ease-out both;
}

@keyframes capsule_jumping {
      0% { transform: translateY(25%);}
     40% { transform: translateY(-20%);}
     80% { transform: translateY(15%);}
    100% { transform: translateY(0%);}
}


.upper-capsule-in {
    transform-origin: center bottom;
    animation: upper_capsule 333ms ease-out both;
}

@keyframes upper_capsule {
      0% { transform: scale(0.68, 0.5090);}
     30% { transform: scale(0.68, 0.7176);}
     50% { transform: scale(    1,      1);}
     80% { transform: scale(    1, 0.6460);}
    100% { transform: scale(    1,      1);}
}

.lower-capsule-in {
    transform-origin: center top;
    animation: lower_capsule 333ms ease-out both;
}

@keyframes lower_capsule {
      0% { transform: scale(0.68, 0.4086);}
     30% { transform: scale(0.68, 0.6598);}
     50% { transform: scale(   1,      1);}
     80% { transform: scale(   1, 0.5736);}
    100% { transform: scale(   1,      1);}
}