/*
  CSS Animations Collection by Gemini
*/

:root {
  --default-animation-duration: 1s;
  --default-animation-timing-function: ease;
  --default-animation-delay: 0s;
  --default-animation-iteration-count: 1;
  --default-animation-direction: normal;
  --default-animation-fill-mode-in: forwards;
  --default-animation-fill-mode-attention: both;
  /* EDITED: Balanced the default distance */
  --default-translate-distance: 60px; 
  --default-rotation-angle: 90deg;
}

.animate-on-scroll {
    opacity: 0;
}

[class*="In"] {
  visibility: visible !important;
}

/* Entrance Animations */
@keyframes fadeIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
.fadeIn { animation-name: fadeIn; }

@keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, var(--animation-translate-y, calc(-1 * var(--default-translate-distance))), 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
.fadeInDown { --animation-translate-y: calc(-1 * var(--default-translate-distance)); animation-name: fadeInDown; }

@keyframes fadeInLeft { from { opacity: 0; transform: translate3d(var(--animation-translate-x, calc(-1 * var(--default-translate-distance))), 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
.fadeInLeft { --animation-translate-x: calc(-1 * var(--default-translate-distance)); animation-name: fadeInLeft; }

@keyframes fadeInRight { from { opacity: 0; transform: translate3d(var(--animation-translate-x, var(--default-translate-distance)), 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
.fadeInRight { --animation-translate-x: var(--default-translate-distance); animation-name: fadeInRight; }

@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, var(--animation-translate-y, var(--default-translate-distance)), 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
.fadeInUp { --animation-translate-y: var(--default-translate-distance); animation-name: fadeInUp; }


/* 6. Zoom In */
@keyframes zoomIn { from { opacity: 0; transform: scale3d(var(--animation-scale-factor, 0.3), var(--animation-scale-factor, 0.3), var(--animation-scale-factor, 0.3)); } 50% { opacity: 1; } to { opacity: 1; transform: scale3d(1, 1, 1); } }
.zoomIn { --animation-scale-factor: 0.3; animation-name: zoomIn; animation-duration: var(--animation-duration, var(--default-animation-duration)); animation-timing-function: var(--animation-timing-function, ease-out); animation-delay: var(--animation-delay, var(--default-animation-delay)); animation-iteration-count: var(--animation-iteration-count, var(--default-animation-iteration-count)); animation-direction: var(--animation-direction, var(--default-animation-direction)); animation-fill-mode: var(--animation-fill-mode, var(--default-animation-fill-mode-in)); }

/* 7. Zoom In Down */
@keyframes zoomInDown { from { opacity: 0; transform: scale3d(var(--animation-scale-factor, 0.1), var(--animation-scale-factor, 0.1), var(--animation-scale-factor, 0.1)) translate3d(0, var(--animation-translate-y, -1000px), 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } to { opacity: 1; transform: scale3d(1, 1, 1) translate3d(0, 0, 0); } }
.zoomInDown { --animation-scale-factor: 0.1; --animation-translate-y: -1000px; animation-name: zoomInDown; animation-duration: var(--animation-duration, var(--default-animation-duration)); animation-delay: var(--animation-delay, var(--default-animation-delay)); animation-iteration-count: var(--animation-iteration-count, var(--default-animation-iteration-count)); animation-direction: var(--animation-direction, var(--default-animation-direction)); animation-fill-mode: var(--animation-fill-mode, var(--default-animation-fill-mode-in)); }

/* 8. Zoom In Left */
@keyframes zoomInLeft { from { opacity: 0; transform: scale3d(var(--animation-scale-factor, 0.1), var(--animation-scale-factor, 0.1), var(--animation-scale-factor, 0.1)) translate3d(var(--animation-translate-x, -1000px), 0, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } to { opacity: 1; transform: scale3d(1, 1, 1) translate3d(0, 0, 0); } }
.zoomInLeft { --animation-scale-factor: 0.1; --animation-translate-x: -1000px; animation-name: zoomInLeft; animation-duration: var(--animation-duration, var(--default-animation-duration)); animation-delay: var(--animation-delay, var(--default-animation-delay)); animation-iteration-count: var(--animation-iteration-count, var(--default-animation-iteration-count)); animation-direction: var(--animation-direction, var(--default-animation-direction)); animation-fill-mode: var(--animation-fill-mode, var(--default-animation-fill-mode-in)); }

/* 9. Zoom In Right */
@keyframes zoomInRight { from { opacity: 0; transform: scale3d(var(--animation-scale-factor, 0.1), var(--animation-scale-factor, 0.1), var(--animation-scale-factor, 0.1)) translate3d(var(--animation-translate-x, 1000px), 0, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } to { opacity: 1; transform: scale3d(1, 1, 1) translate3d(0, 0, 0); } }
.zoomInRight { --animation-scale-factor: 0.1; --animation-translate-x: 1000px; animation-name: zoomInRight; animation-duration: var(--animation-duration, var(--default-animation-duration)); animation-delay: var(--animation-delay, var(--default-animation-delay)); animation-iteration-count: var(--animation-iteration-count, var(--default-animation-iteration-count)); animation-direction: var(--animation-direction, var(--default-animation-direction)); animation-fill-mode: var(--animation-fill-mode, var(--default-animation-fill-mode-in)); }

/* 10. Zoom In Up */
@keyframes zoomInUp { from { opacity: 0; transform: scale3d(var(--animation-scale-factor, 0.1), var(--animation-scale-factor, 0.1), var(--animation-scale-factor, 0.1)) translate3d(0, var(--animation-translate-y, 1000px), 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); } 60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); } to { opacity: 1; transform: scale3d(1, 1, 1) translate3d(0, 0, 0); } }
.zoomInUp { --animation-scale-factor: 0.1; --animation-translate-y: 1000px; animation-name: zoomInUp; animation-duration: var(--animation-duration, var(--default-animation-duration)); animation-delay: var(--animation-delay, var(--default-animation-delay)); animation-iteration-count: var(--animation-iteration-count, var(--default-animation-iteration-count)); animation-direction: var(--animation-direction, var(--default-animation-direction)); animation-fill-mode: var(--animation-fill-mode, var(--default-animation-fill-mode-in)); }


@keyframes bounceInKeyframes { from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: scale3d(var(--animation-scale-factor, .3), var(--animation-scale-factor, .3), var(--animation-scale-factor, .3)); } 20% { transform: scale3d(1.1, 1.1, 1.1); } 40% { transform: scale3d(.9, .9, .9); } 60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); } 80% { transform: scale3d(.97, .97, .97); } to { opacity: 1; transform: scale3d(1, 1, 1); } }
.bounceIn { --animation-scale-factor: .3; animation-name: bounceInKeyframes; animation-duration: var(--animation-duration, 0.75s); }

@keyframes bounceInDownKeyframes { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; transform: translate3d(0, -120%, 0); } 60% { opacity: 1; transform: translate3d(0, 45px, 0); } 75% { transform: translate3d(0, -15px, 0); } 90% { transform: translate3d(0, 5px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
.bounceInDown { animation-name: bounceInDownKeyframes; }

@keyframes bounceInLeftKeyframes { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(-120%, 0, 0); } 60% { opacity: 1; transform: translate3d(45px, 0, 0); } 75% { transform: translate3d(-15px, 0, 0); } 90% { transform: translate3d(5px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
.bounceInLeft { animation-name: bounceInLeftKeyframes; }

@keyframes bounceInRightKeyframes { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; transform: translate3d(120%, 0, 0); } 60% { opacity: 1; transform: translate3d(-45px, 0, 0); } 75% { transform: translate3d(15px, 0, 0); } 90% { transform: translate3d(-5px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
.bounceInRight { animation-name: bounceInRightKeyframes; }

@keyframes bounceInUpKeyframes { from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); } 0% { opacity: 0; transform: translate3d(0, 120%, 0); } 60% { opacity: 1; transform: translate3d(0, -45px, 0); } 75% { transform: translate3d(0, 15px, 0); } 90% { transform: translate3d(0, -5px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
.bounceInUp { animation-name: bounceInUpKeyframes; }


/* 16. Slide In Down */
@keyframes slideInDown { from { transform: translate3d(0, var(--animation-translate-y, -100%), 0); visibility: hidden; opacity: 0; } to { transform: translate3d(0, 0, 0); visibility: visible; opacity: 1; } }
.slideInDown { --animation-translate-y: -100%; animation-name: slideInDown; animation-duration: var(--animation-duration, var(--default-animation-duration)); animation-timing-function: var(--animation-timing-function, cubic-bezier(0.25, 0.46, 0.45, 0.94)); animation-delay: var(--animation-delay, var(--default-animation-delay)); animation-iteration-count: var(--animation-iteration-count, var(--default-animation-iteration-count)); animation-direction: var(--animation-direction, var(--default-animation-direction)); animation-fill-mode: var(--animation-fill-mode, var(--default-animation-fill-mode-in)); }

/* 17. Slide In Left */
@keyframes slideInLeft { from { transform: translate3d(var(--animation-translate-x, -100%), 0, 0); visibility: hidden; opacity: 0; } to { transform: translate3d(0, 0, 0); visibility: visible; opacity: 1; } }
.slideInLeft { --animation-translate-x: -100%; animation-name: slideInLeft; animation-duration: var(--animation-duration, var(--default-animation-duration)); animation-timing-function: var(--animation-timing-function, cubic-bezier(0.25, 0.46, 0.45, 0.94)); animation-delay: var(--animation-delay, var(--default-animation-delay)); animation-iteration-count: var(--animation-iteration-count, var(--default-animation-iteration-count)); animation-direction: var(--animation-direction, var(--default-animation-direction)); animation-fill-mode: var(--animation-fill-mode, var(--default-animation-fill-mode-in)); }

/* 18. Slide In Right */
@keyframes slideInRight { from { transform: translate3d(var(--animation-translate-x, 100%), 0, 0); visibility: hidden; opacity: 0; } to { transform: translate3d(0, 0, 0); visibility: visible; opacity: 1; } }
.slideInRight { --animation-translate-x: 100%; animation-name: slideInRight; animation-duration: var(--animation-duration, var(--default-animation-duration)); animation-timing-function: var(--animation-timing-function, cubic-bezier(0.25, 0.46, 0.45, 0.94)); animation-delay: var(--animation-delay, var(--default-animation-delay)); animation-iteration-count: var(--animation-iteration-count, var(--default-animation-iteration-count)); animation-direction: var(--animation-direction, var(--default-animation-direction)); animation-fill-mode: var(--animation-fill-mode, var(--default-animation-fill-mode-in)); }

/* 19. Slide In Up */
@keyframes slideInUp { from { transform: translate3d(0, var(--animation-translate-y, 100%), 0); visibility: hidden; opacity: 0; } to { transform: translate3d(0, 0, 0); visibility: visible; opacity: 1; } }
.slideInUp { --animation-translate-y: 100%; animation-name: slideInUp; animation-duration: var(--animation-duration, var(--default-animation-duration)); animation-timing-function: var(--animation-timing-function, cubic-bezier(0.25, 0.46, 0.45, 0.94)); animation-delay: var(--animation-delay, var(--default-animation-delay)); animation-iteration-count: var(--animation-iteration-count, var(--default-animation-iteration-count)); animation-direction: var(--animation-direction, var(--default-animation-direction)); animation-fill-mode: var(--animation-fill-mode, var(--default-animation-fill-mode-in)); }

/* 20. Rotate In */
@keyframes rotateIn { from { transform-origin: var(--animation-transform-origin, center); transform: rotate3d(0, 0, 1, var(--animation-rotation-degrees, -200deg)); opacity: 0; } to { transform-origin: var(--animation-transform-origin, center); transform: rotate3d(0, 0, 1, 0deg); opacity: 1; } }
.rotateIn { --animation-transform-origin: center; --animation-rotation-degrees: -200deg; animation-name: rotateIn; animation-duration: var(--animation-duration, var(--default-animation-duration)); animation-timing-function: var(--animation-timing-function, ease-out); animation-delay: var(--animation-delay, var(--default-animation-delay)); animation-iteration-count: var(--animation-iteration-count, var(--default-animation-iteration-count)); animation-direction: var(--animation-direction, var(--default-animation-direction)); animation-fill-mode: var(--animation-fill-mode, var(--default-animation-fill-mode-in)); }

/* 21. Rotate In Down Left */
@keyframes rotateInDownLeft { from { transform-origin: var(--animation-transform-origin, left bottom); transform: rotate3d(0, 0, 1, var(--animation-rotation-degrees, -45deg)); opacity: 0; } to { transform-origin: var(--animation-transform-origin, left bottom); transform: rotate3d(0, 0, 1, 0deg); opacity: 1; } }
.rotateInDownLeft { --animation-transform-origin: left bottom; --animation-rotation-degrees: -45deg; animation-name: rotateInDownLeft; animation-duration: var(--animation-duration, var(--default-animation-duration)); animation-timing-function: var(--animation-timing-function, ease-out); animation-delay: var(--animation-delay, var(--default-animation-delay)); animation-iteration-count: var(--animation-iteration-count, var(--default-animation-iteration-count)); animation-direction: var(--animation-direction, var(--default-animation-direction)); animation-fill-mode: var(--animation-fill-mode, var(--default-animation-fill-mode-in)); }

/* 22. Rotate In Down Right */
@keyframes rotateInDownRight { from { transform-origin: var(--animation-transform-origin, right bottom); transform: rotate3d(0, 0, 1, var(--animation-rotation-degrees, 45deg)); opacity: 0; } to { transform-origin: var(--animation-transform-origin, right bottom); transform: rotate3d(0, 0, 1, 0deg); opacity: 1; } }
.rotateInDownRight { --animation-transform-origin: right bottom; --animation-rotation-degrees: 45deg; animation-name: rotateInDownRight; animation-duration: var(--animation-duration, var(--default-animation-duration)); animation-timing-function: var(--animation-timing-function, ease-out); animation-delay: var(--animation-delay, var(--default-animation-delay)); animation-iteration-count: var(--animation-iteration-count, var(--default-animation-iteration-count)); animation-direction: var(--animation-direction, var(--default-animation-direction)); animation-fill-mode: var(--animation-fill-mode, var(--default-animation-fill-mode-in)); }

/* 23. Rotate In Up Left */
@keyframes rotateInUpLeft { from { transform-origin: var(--animation-transform-origin, left top); transform: rotate3d(0, 0, 1, var(--animation-rotation-degrees, 45deg)); opacity: 0; } to { transform-origin: var(--animation-transform-origin, left top); transform: rotate3d(0, 0, 1, 0deg); opacity: 1; } }
.rotateInUpLeft { --animation-transform-origin: left top; --animation-rotation-degrees: 45deg; animation-name: rotateInUpLeft; animation-duration: var(--animation-duration, var(--default-animation-duration)); animation-timing-function: var(--animation-timing-function, ease-out); animation-delay: var(--animation-delay, var(--default-animation-delay)); animation-iteration-count: var(--animation-iteration-count, var(--default-animation-iteration-count)); animation-direction: var(--animation-direction, var(--default-animation-direction)); animation-fill-mode: var(--animation-fill-mode, var(--default-animation-fill-mode-in)); }

/* 24. Rotate In Up Right */
@keyframes rotateInUpRight { from { transform-origin: var(--animation-transform-origin, right top); transform: rotate3d(0, 0, 1, var(--animation-rotation-degrees, -45deg)); opacity: 0; } to { transform-origin: var(--animation-transform-origin, right top); transform: rotate3d(0, 0, 1, 0deg); opacity: 1; } }
.rotateInUpRight { --animation-transform-origin: right top; --animation-rotation-degrees: -45deg; animation-name: rotateInUpRight; animation-duration: var(--animation-duration, var(--default-animation-duration)); animation-timing-function: var(--animation-timing-function, ease-out); animation-delay: var(--animation-delay, var(--default-animation-delay)); animation-iteration-count: var(--animation-iteration-count, var(--default-animation-iteration-count)); animation-direction: var(--animation-direction, var(--default-animation-direction)); animation-fill-mode: var(--animation-fill-mode, var(--default-animation-fill-mode-in)); }


/* == Attention Seeker Animations == */
@keyframes pulse { 0% { transform: scale3d(1, 1, 1); } 25% { transform: scale3d(1.1, 1.1, 1.1); } 50% { transform: scale3d(0.95, 0.95, 0.95); } 75% { transform: scale3d(1.05, 1.05, 1.05); } 100% { transform: scale3d(1, 1, 1); } }
.pulse { animation-name: pulse; }

.pulse-continuous {
  animation: pulse-continuous 500ms infinite ease-in-out;
}

@keyframes pulse-continuous {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* 26. Flash */
@keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: var(--animation-flash-opacity, 0); } }
.flash { --animation-flash-opacity: 0; animation-name: flash; animation-duration: var(--animation-duration, var(--default-animation-duration)); animation-timing-function: var(--animation-timing-function, ease-in-out); animation-delay: var(--animation-delay, var(--default-animation-delay)); animation-iteration-count: var(--animation-iteration-count, var(--default-animation-iteration-count)); animation-direction: var(--animation-direction, var(--default-animation-direction)); animation-fill-mode: var(--animation-fill-mode, var(--default-animation-fill-mode-attention)); }


/* 30. Head Shake */
@keyframes headShake { 0% { transform: translateX(0); } 6.5% { transform: translateX(var(--animation-headshake-x1, -6px)) rotateY(var(--animation-headshake-rot1, -9deg)); } 18.5% { transform: translateX(var(--animation-headshake-x2, 5px)) rotateY(var(--animation-headshake-rot2, 7deg)); } 31.5% { transform: translateX(var(--animation-headshake-x3, -3px)) rotateY(var(--animation-headshake-rot3, -5deg)); } 43.5% { transform: translateX(var(--animation-headshake-x4, 2px)) rotateY(var(--animation-headshake-rot4, 3deg)); } 50% { transform: translateX(0); } to { transform: translateX(0); } }
.headShake { --animation-headshake-x1: -6px; --animation-headshake-rot1: -9deg; --animation-headshake-x2: 5px;  --animation-headshake-rot2: 7deg; --animation-headshake-x3: -3px; --animation-headshake-rot3: -5deg; --animation-headshake-x4: 2px;  --animation-headshake-rot4: 3deg; animation-name: headShake; animation-duration: var(--animation-duration, 1s); animation-timing-function: var(--animation-timing-function, ease-in-out); animation-delay: var(--animation-delay, var(--default-animation-delay)); animation-iteration-count: var(--animation-iteration-count, var(--default-animation-iteration-count)); animation-direction: var(--animation-direction, var(--default-animation-direction)); animation-fill-mode: var(--animation-fill-mode, var(--default-animation-fill-mode-attention)); }

/* 35. Light Speed In */
@keyframes lightSpeedIn { from { transform: translate3d(var(--animation-lightspeed-translate-x, 100%), 0, 0) skewX(var(--animation-lightspeed-skew, -30deg)); opacity: 0; } 60% { transform: skewX(var(--animation-lightspeed-skew-mid, 20deg)); opacity: 1; } 80% { transform: skewX(var(--animation-lightspeed-skew-end, -5deg)); } to { transform: translate3d(0, 0, 0); opacity: 1; } }
.lightSpeedIn { --animation-lightspeed-translate-x: 100%; --animation-lightspeed-skew: -30deg; --animation-lightspeed-skew-mid: 20deg; --animation-lightspeed-skew-end: -5deg; animation-name: lightSpeedIn; animation-duration: var(--animation-duration, var(--default-animation-duration)); animation-timing-function: var(--animation-timing-function, ease-out); animation-delay: var(--animation-delay, var(--default-animation-delay)); animation-iteration-count: var(--animation-iteration-count, var(--default-animation-iteration-count)); animation-direction: var(--animation-direction, var(--default-animation-direction)); animation-fill-mode: var(--animation-fill-mode, var(--default-animation-fill-mode-in)); }

/* 36. Roll In */
@keyframes rollIn { from { opacity: 0; transform: translate3d(var(--animation-roll-translate-x, -100%), 0, 0) rotate3d(0, 0, 1, var(--animation-roll-degrees, -120deg)); } to { opacity: 1; transform: translate3d(0, 0, 0) rotate3d(0, 0, 1, 0deg); } }
.rollIn { --animation-roll-translate-x: -100%; --animation-roll-degrees: -120deg; animation-name: rollIn; animation-duration: var(--animation-duration, var(--default-animation-duration)); animation-timing-function: var(--animation-timing-function, ease-out); animation-delay: var(--animation-delay, var(--default-animation-delay)); animation-iteration-count: var(--animation-iteration-count, var(--default-animation-iteration-count)); animation-direction: var(--animation-direction, var(--default-animation-direction)); animation-fill-mode: var(--animation-fill-mode, var(--default-animation-fill-mode-in)); }

@keyframes shake { 10%, 90% { transform: translate3d(-2px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-5px, 0, 0); } 40%, 60% { transform: translate3d(5px, 0, 0); } }
.shake { animation-name: shake; }

@keyframes bounce { from, 20%, 53%, 80%, to { transform: translate3d(0,0,0); } 40%, 43% { transform: translate3d(0, -30px, 0); } 70% { transform: translate3d(0, -15px, 0); } 90% { transform: translate3d(0,-4px,0); } }
.bounce { animation-name: bounce; transform-origin: center bottom; }

@keyframes tada { from { transform: scale3d(1, 1, 1); } 10%, 20% { transform: scale3d(.95, .95, .95) rotate3d(0, 0, 1, -3deg); } 30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); } 40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); } to { transform: scale3d(1, 1, 1); } }
.tada { animation-name: tada; }

@keyframes wobble { from { transform: translate3d(0, 0, 0); } 15% { transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); } 30% { transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); } 45% { transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); } 60% { transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); } 75% { transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); } to { transform: translate3d(0, 0, 0); } }
.wobble { animation-name: wobble; }

@keyframes swing { 20% { transform: rotate3d(0, 0, 1, 15deg); } 40% { transform: rotate3d(0, 0, 1, -10deg); } 60% { transform: rotate3d(0, 0, 1, 5deg); } 80% { transform: rotate3d(0, 0, 1, -5deg); } to { transform: rotate3d(0, 0, 1, 0deg); } }
.swing { animation-name: swing; transform-origin: top center; }

@keyframes rubberBand { from { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(.95, 1.05, 1); } 75% { transform: scale3d(1.05, .95, 1); } to { transform: scale3d(1, 1, 1); } }
.rubberBand { animation-name: rubberBand; }

@keyframes jello { from, 11.1%, to { transform: none; } 22.2% { transform: skewX(-18deg) skewY(-18deg); } 33.3% { transform: skewX(9deg) skewY(9deg); } 44.4% { transform: skewX(-4.5deg) skewY(-4.5deg); } 55.5% { transform: skewX(2.25deg) skewY(2.25deg); } 66.6% { transform: skewX(-1.125deg) skewY(-1.125deg); } 77.7% { transform: skewX(0.5625deg) skewY(0.5625deg); } 88.8% { transform: skewX(-0.28125deg) skewY(-0.28125deg); } }
.jello { animation-name: jello; transform-origin: center; }

/* General rule for all animations to share common properties */
[class*="In"], .pulse, .shake, .bounce, .tada, .wobble, .swing, .rubberBand, .jello, .headShake {
    animation-duration: var(--animation-duration, 1s);
    animation-timing-function: var(--animation-timing-function, ease-in-out);
    animation-delay: var(--animation-delay, 0s);
    animation-iteration-count: var(--animation-iteration-count, 1);
    animation-direction: var(--animation-direction, normal);
    animation-fill-mode: var(--animation-fill-mode, forwards);
}

.animate-on-hover:hover {
    animation-name: var(--hover-animation, shake);
    animation-duration: var(--animation-duration, 0.8s);
}