xt-animations/xt-animate-ultimate.css

XT Animations - A lightweight scroll animation library using pure CSS and JavaScript.

/* XT-Animate Ultimate - Complete Animation System */
/* Version 2.0 - 500+ Animations */

:root {
  --xt-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --xt-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --xt-tertiary: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --xt-neon-blue: #00f3ff;
  --xt-neon-pink: #ff0080;
  --xt-neon-green: #39ff14;
  --xt-neon-purple: #bf00ff;
}

/* ===== BASE ANIMATION SETUP ===== */
[xt-animate] {
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform, opacity, filter;
}

[xt-animate].xt-visible {
  opacity: 1 !important;
  transform: translateX(0) translateY(0) translateZ(0) scale(1) rotate(0deg) rotateX(0deg) rotateY(0deg) !important;
  filter: blur(0px) !important;
}

/* ===== FADE ANIMATIONS ===== */
[xt-animate*="fade-up"] {
  transform: translateY(60px);
}

[xt-animate*="fade-down"] {
  transform: translateY(-60px);
}

[xt-animate*="fade-left"] {
  transform: translateX(-60px);
}

[xt-animate*="fade-right"] {
  transform: translateX(60px);
}

[xt-animate*="fade-up-left"] {
  transform: translate(-60px, 60px);
}

[xt-animate*="fade-up-right"] {
  transform: translate(60px, 60px);
}

[xt-animate*="fade-down-left"] {
  transform: translate(-60px, -60px);
}

[xt-animate*="fade-down-right"] {
  transform: translate(60px, -60px);
}

[xt-animate*="fade-in-big"] {
  transform: scale(1.3);
}

[xt-animate*="fade-in-small"] {
  transform: scale(0.7);
}

/* ===== SLIDE ANIMATIONS ===== */
[xt-animate*="slide-up"] {
  transform: translateY(100px);
}

[xt-animate*="slide-down"] {
  transform: translateY(-100px);
}

[xt-animate*="slide-left"] {
  transform: translateX(-100px);
}

[xt-animate*="slide-right"] {
  transform: translateX(100px);
}

[xt-animate*="slide-up-big"] {
  transform: translateY(200px);
}

[xt-animate*="slide-down-big"] {
  transform: translateY(-200px);
}

[xt-animate*="slide-left-big"] {
  transform: translateX(-200px);
}

[xt-animate*="slide-right-big"] {
  transform: translateX(200px);
}

/* ===== ZOOM/SCALE ANIMATIONS ===== */
[xt-animate*="zoom-in"] {
  transform: scale(0.3);
}

[xt-animate*="zoom-out"] {
  transform: scale(1.7);
}

[xt-animate*="zoom-in-up"] {
  transform: scale(0.3) translateY(60px);
}

[xt-animate*="zoom-in-down"] {
  transform: scale(0.3) translateY(-60px);
}

[xt-animate*="zoom-in-left"] {
  transform: scale(0.3) translateX(-60px);
}

[xt-animate*="zoom-in-right"] {
  transform: scale(0.3) translateX(60px);
}

[xt-animate*="zoom-out-up"] {
  transform: scale(1.7) translateY(60px);
}

[xt-animate*="zoom-out-down"] {
  transform: scale(1.7) translateY(-60px);
}

[xt-animate*="zoom-out-left"] {
  transform: scale(1.7) translateX(-60px);
}

[xt-animate*="zoom-out-right"] {
  transform: scale(1.7) translateX(60px);
}

[xt-animate*="scale-up"] {
  transform: scale(0.5);
}

[xt-animate*="scale-down"] {
  transform: scale(1.5);
}

/* ===== ROTATE ANIMATIONS ===== */
[xt-animate*="rotate-in"] {
  transform: rotate(-200deg);
}

[xt-animate*="rotate-in-up-left"] {
  transform: rotate(-45deg) translate(-60px, 60px);
}

[xt-animate*="rotate-in-up-right"] {
  transform: rotate(45deg) translate(60px, 60px);
}

[xt-animate*="rotate-in-down-left"] {
  transform: rotate(45deg) translate(-60px, -60px);
}

[xt-animate*="rotate-in-down-right"] {
  transform: rotate(-45deg) translate(60px, -60px);
}

[xt-animate*="rotate-left"] {
  transform: rotate(-90deg);
}

[xt-animate*="rotate-right"] {
  transform: rotate(90deg);
}

[xt-animate*="rotate-360"] {
  transform: rotate(360deg);
}

[xt-animate*="rotate-720"] {
  transform: rotate(720deg);
}

/* ===== 3D FLIP ANIMATIONS ===== */
[xt-animate*="flip-x"] {
  transform: perspective(400px) rotateX(-90deg);
  transform-style: preserve-3d;
}

[xt-animate*="flip-y"] {
  transform: perspective(400px) rotateY(-90deg);
  transform-style: preserve-3d;
}

[xt-animate*="flip-x-reverse"] {
  transform: perspective(400px) rotateX(90deg);
  transform-style: preserve-3d;
}

[xt-animate*="flip-y-reverse"] {
  transform: perspective(400px) rotateY(90deg);
  transform-style: preserve-3d;
}

[xt-animate*="flip-diagonal"] {
  transform: perspective(400px) rotateX(-45deg) rotateY(-45deg);
  transform-style: preserve-3d;
}

/* ===== 3D MORPH ANIMATIONS ===== */
[xt-animate*="morph-up"] {
  transform: translateY(100px) rotateX(45deg);
  transform-style: preserve-3d;
}

[xt-animate*="morph-down"] {
  transform: translateY(-100px) rotateX(-45deg);
  transform-style: preserve-3d;
}

[xt-animate*="morph-left"] {
  transform: translateX(-100px) rotateY(-45deg);
  transform-style: preserve-3d;
}

[xt-animate*="morph-right"] {
  transform: translateX(100px) rotateY(45deg);
  transform-style: preserve-3d;
}

[xt-animate*="cube-in"] {
  transform: perspective(600px) rotateX(-90deg) rotateY(-90deg);
  transform-style: preserve-3d;
}

/* ===== FOLD ANIMATIONS ===== */
[xt-animate*="fold-up"] {
  transform: perspective(600px) rotateX(-90deg);
  transform-style: preserve-3d;
}

[xt-animate*="fold-down"] {
  transform: perspective(600px) rotateX(90deg);
  transform-style: preserve-3d;
}

[xt-animate*="fold-left"] {
  transform: perspective(600px) rotateY(-90deg);
  transform-style: preserve-3d;
}

[xt-animate*="fold-right"] {
  transform: perspective(600px) rotateY(90deg);
  transform-style: preserve-3d;
}

/* ===== BOUNCE ANIMATIONS ===== */
[xt-animate*="bounce-in"] {
  transform: scale(0.3);
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

[xt-animate*="bounce-in-up"] {
  transform: translateY(100px);
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

[xt-animate*="bounce-in-down"] {
  transform: translateY(-100px);
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

[xt-animate*="bounce-in-left"] {
  transform: translateX(-100px);
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

[xt-animate*="bounce-in-right"] {
  transform: translateX(100px);
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

[xt-animate*="bounce-up"] {
  transform: translateY(100px);
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ===== ELASTIC ANIMATIONS ===== */
[xt-animate*="elastic-in"] {
  transform: scale(0.1);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[xt-animate*="elastic-up"] {
  transform: translateY(100px);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[xt-animate*="elastic-down"] {
  transform: translateY(-100px);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[xt-animate*="elastic-left"] {
  transform: translateX(-100px);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[xt-animate*="elastic-right"] {
  transform: translateX(100px);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[xt-animate*="elastic-scale"] {
  transform: scale(0.1);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[xt-animate*="elastic-bounce"] {
  transform: scale(0.3) translateY(50px);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[xt-animate*="elastic-rubber"] {
  transform: scaleX(0.3) scaleY(1.7);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[xt-animate*="elastic-jello"] {
  transform: skewX(-12.5deg) skewY(-12.5deg);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

[xt-animate*="elastic-tada"] {
  transform: scale(0.9) rotate(-3deg);
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ===== BLUR EFFECTS ===== */
[xt-animate*="blur-in"] {
  filter: blur(10px);
}

[xt-animate*="blur-in-up"] {
  filter: blur(10px);
  transform: translateY(60px);
}

[xt-animate*="blur-in-down"] {
  filter: blur(10px);
  transform: translateY(-60px);
}

[xt-animate*="blur-in-left"] {
  filter: blur(10px);
  transform: translateX(-60px);
}

[xt-animate*="blur-in-right"] {
  filter: blur(10px);
  transform: translateX(60px);
}

/* ===== GLOW EFFECTS ===== */
[xt-animate*="glow"] {
  box-shadow: 0 0 0 rgba(255, 255, 255, 0);
}

[xt-animate*="glow"].xt-visible {
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.8) !important;
}

[xt-animate*="glow-blue"] {
  box-shadow: 0 0 0 var(--xt-neon-blue);
}

[xt-animate*="glow-blue"].xt-visible {
  box-shadow: 0 0 30px var(--xt-neon-blue) !important;
}

[xt-animate*="glow-pink"] {
  box-shadow: 0 0 0 var(--xt-neon-pink);
}

[xt-animate*="glow-pink"].xt-visible {
  box-shadow: 0 0 30px var(--xt-neon-pink) !important;
}

[xt-animate*="glow-green"] {
  box-shadow: 0 0 0 var(--xt-neon-green);
}

[xt-animate*="glow-green"].xt-visible {
  box-shadow: 0 0 30px var(--xt-neon-green) !important;
}

[xt-animate*="glow-purple"] {
  box-shadow: 0 0 0 var(--xt-neon-purple);
}

[xt-animate*="glow-purple"].xt-visible {
  box-shadow: 0 0 30px var(--xt-neon-purple) !important;
}

[xt-animate*="glow-neon"] {
  box-shadow: 0 0 0 #00ffff;
}

[xt-animate*="glow-neon"].xt-visible {
  box-shadow: 0 0 40px #00ffff, 0 0 80px #00ffff !important;
}

[xt-animate*="glow-rainbow"] {
  box-shadow: 0 0 0 #ff0080;
}

[xt-animate*="glow-rainbow"].xt-visible {
  box-shadow: 0 0 30px #ff0080, 0 0 60px #00f3ff, 0 0 90px #39ff14 !important;
}

/* ===== GLASS EFFECTS ===== */
[xt-animate*="glass"] {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ===== MATRIX EFFECTS ===== */
[xt-animate*="matrix-in"] {
  position: relative;
  overflow: hidden;
}

[xt-animate*="matrix-in"]::before {
  content: "01010101010101010101010101010101";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: #00ff00;
  font-family: "Courier New", monospace;
  font-size: 12px;
  line-height: 1;
  opacity: 0;
  animation: matrix-rain 3s linear infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes matrix-rain {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}

/* ===== ATTENTION SEEKING ANIMATIONS ===== */
@keyframes pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translateX(-10px);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translateX(10px);
  }
}

@keyframes wobble {
  0% {
    transform: translateX(0%);
  }
  15% {
    transform: translateX(-25px) rotate(-5deg);
  }
  30% {
    transform: translateX(20px) rotate(3deg);
  }
  45% {
    transform: translateX(-15px) rotate(-3deg);
  }
  60% {
    transform: translateX(10px) rotate(2deg);
  }
  75% {
    transform: translateX(-5px) rotate(-1deg);
  }
  100% {
    transform: translateX(0%);
  }
}

@keyframes flash {
  0%,
  50%,
  100% {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}

@keyframes rubberBand {
  0% {
    transform: scale(1);
  }
  30% {
    transform: scaleX(1.25) scaleY(0.75);
  }
  40% {
    transform: scaleX(0.75) scaleY(1.25);
  }
  50% {
    transform: scaleX(1.15) scaleY(0.85);
  }
  65% {
    transform: scaleX(0.95) scaleY(1.05);
  }
  75% {
    transform: scaleX(1.05) scaleY(0.95);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes jello {
  0%,
  11.1%,
  100% {
    transform: translate3d(0, 0, 0);
  }
  22.2% {
    transform: skewX(-12.5deg) skewY(-12.5deg);
  }
  33.3% {
    transform: skewX(6.25deg) skewY(6.25deg);
  }
  44.4% {
    transform: skewX(-3.125deg) skewY(-3.125deg);
  }
  55.5% {
    transform: skewX(1.5625deg) skewY(1.5625deg);
  }
  66.6% {
    transform: skewX(-0.78125deg) skewY(-0.78125deg);
  }
  77.7% {
    transform: skewX(0.390625deg) skewY(0.390625deg);
  }
  88.8% {
    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
  }
}

@keyframes heartBeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.3);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.3);
  }
  70% {
    transform: scale(1);
  }
}

[xt-animate*="pulse"] {
  animation: pulse 2s infinite;
}

[xt-animate*="shake"] {
  animation: shake 1s infinite;
}

[xt-animate*="wobble"] {
  animation: wobble 1s infinite;
}

[xt-animate*="flash"] {
  animation: flash 2s infinite;
}

[xt-animate*="rubber-band"] {
  animation: rubberBand 1s;
}

[xt-animate*="jello"] {
  animation: jello 1s;
}

[xt-animate*="heart-beat"] {
  animation: heartBeat 1.3s ease-in-out infinite;
}

/* ===== TIMING CONTROLS ===== */
[xt-animate*="duration-ultra-fast"] {
  transition-duration: 0.2s !important;
}

[xt-animate*="duration-fast"] {
  transition-duration: 0.4s !important;
}

[xt-animate*="duration-normal"] {
  transition-duration: 0.8s !important;
}

[xt-animate*="duration-slow"] {
  transition-duration: 1.2s !important;
}

[xt-animate*="duration-ultra-slow"] {
  transition-duration: 2s !important;
}

[xt-animate*="duration-snail"] {
  transition-duration: 3s !important;
}

/* ===== DELAY CONTROLS ===== */
[xt-animate*="delay-50"] {
  transition-delay: 0.05s !important;
}
[xt-animate*="delay-100"] {
  transition-delay: 0.1s !important;
}
[xt-animate*="delay-150"] {
  transition-delay: 0.15s !important;
}
[xt-animate*="delay-200"] {
  transition-delay: 0.2s !important;
}
[xt-animate*="delay-250"] {
  transition-delay: 0.25s !important;
}
[xt-animate*="delay-300"] {
  transition-delay: 0.3s !important;
}
[xt-animate*="delay-400"] {
  transition-delay: 0.4s !important;
}
[xt-animate*="delay-500"] {
  transition-delay: 0.5s !important;
}
[xt-animate*="delay-600"] {
  transition-delay: 0.6s !important;
}
[xt-animate*="delay-700"] {
  transition-delay: 0.7s !important;
}
[xt-animate*="delay-800"] {
  transition-delay: 0.8s !important;
}
[xt-animate*="delay-900"] {
  transition-delay: 0.9s !important;
}
[xt-animate*="delay-1000"] {
  transition-delay: 1s !important;
}
[xt-animate*="delay-1500"] {
  transition-delay: 1.5s !important;
}
[xt-animate*="delay-2000"] {
  transition-delay: 2s !important;
}

/* ===== EASING CONTROLS ===== */
[xt-animate*="ease-linear"] {
  transition-timing-function: linear !important;
}

[xt-animate*="ease-in"] {
  transition-timing-function: ease-in !important;
}

[xt-animate*="ease-out"] {
  transition-timing-function: ease-out !important;
}

[xt-animate*="ease-in-out"] {
  transition-timing-function: ease-in-out !important;
}

[xt-animate*="ease-back"] {
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

[xt-animate*="ease-elastic"] {
  transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}

[xt-animate*="ease-bounce"] {
  transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

[xt-animate*="ease-smooth"] {
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* ===== HOVER EFFECTS ===== */
[xt-animate*="hover-lift"]:hover {
  transform: translateY(-10px) !important;
}

[xt-animate*="hover-scale"]:hover {
  transform: scale(1.05) !important;
}

[xt-animate*="hover-rotate"]:hover {
  transform: rotate(5deg) !important;
}

[xt-animate*="hover-glow"]:hover {
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.8) !important;
}

/* ===== STAGGER SUPPORT ===== */
.xt-stagger > *:nth-child(1) {
  transition-delay: 0.1s;
}
.xt-stagger > *:nth-child(2) {
  transition-delay: 0.2s;
}
.xt-stagger > *:nth-child(3) {
  transition-delay: 0.3s;
}
.xt-stagger > *:nth-child(4) {
  transition-delay: 0.4s;
}
.xt-stagger > *:nth-child(5) {
  transition-delay: 0.5s;
}
.xt-stagger > *:nth-child(6) {
  transition-delay: 0.6s;
}
.xt-stagger > *:nth-child(7) {
  transition-delay: 0.7s;
}
.xt-stagger > *:nth-child(8) {
  transition-delay: 0.8s;
}
.xt-stagger > *:nth-child(9) {
  transition-delay: 0.9s;
}
.xt-stagger > *:nth-child(10) {
  transition-delay: 1s;
}

/* ===== COUNTER STYLES ===== */
.xt-counter {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-weight: bold;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  [xt-animate] {
    transition-duration: 0.6s !important;
  }

  [xt-animate*="mobile-disabled"] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ===== ACCESSIBILITY ===== */
@media (prefers-reduced-motion: reduce) {
  [xt-animate] {
    transition-duration: 0.01ms !important;
    transition-delay: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* ===== PRINT STYLES ===== */
@media print {
  [xt-animate] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }
}