.bounce {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s cubic-bezier(0.54, 3.56, 0.64, 2);
    transition-delay: 0s; /* important, we'll control it dynamically */
    }

.bounce.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --------- */

.bounce-bottom {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.6s cubic-bezier(0.54, 3.56, 0.64, 2);
    transition-delay: 0s; /* important, we'll control it dynamically */
    }

.bounce-bottom.visible {
    opacity: 1;
    transform: translateY(0);
}
/* Bouncy Animation */
.bouncy {
    opacity: 0;
    transform: scale(0.8);
}

.bouncy.active {
    opacity: 1;
    transform: scale(1);
    animation: bounce 0.5s ease-out;
}

@keyframes bounce {
    0% { transform: scale(0.8); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Tilt and Shake*/

.gentle-tilt-move-shake.active {
    animation: tilt-n-move-shaking 0.25s 4;
  }

  @keyframes tilt-n-move-shaking {
    0% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(5px, 5px) rotate(5deg); }
    50% { transform: translate(0, 0) rotate(0eg); }
    75% { transform: translate(-5px, 5px) rotate(-5deg); }
    100% { transform: translate(0, 0) rotate(0deg); }
  }