```css /* ======================================== GYM FITNESS - COMPLETE ANIMATIONS LIBRARY Dark Theme with Premium Accents ======================================== */ /* CSS Custom Properties for Dark Theme */ :root { /* Dark Theme Colors */ --primary-dark: #0a0a0a; --secondary-dark: #1a1a1a; --accent-dark: #2a2a2a; /* Premium Accents */ --gold: #ffd700; --electric-blue: #00bfff; --neon-green: #39ff14; --platinum: #e5e4e2; --crimson: #dc143c; /* Animation Timings */ --timing-fast: 0.2s; --timing-normal: 0.5s; --timing-slow: 1s; --timing-extra-slow: 2s; /* Easing Functions */ --ease-smooth: cubic-bezier(0.25, 0.8, 0.25, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); --ease-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275); } /* ======================================== FADE ANIMATIONS ======================================== */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } } /* ======================================== SCALE & BOUNCE ANIMATIONS ======================================== */ @keyframes scaleIn { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } } @keyframes scaleOut { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0); } } @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } @keyframes heartbeat { 0%, 50%, 100% { transform: scale(1); } 5%, 15% { transform: scale(1.2); } 25%, 35% { transform: scale(1.1); } } @keyframes bounce { 0%, 20%, 53%, 80%, 100% { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translateY(0); } 40%, 43% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translateY(-30px); } 70% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translateY(-15px); } 90% { transform: translateY(-4px); } } /* ======================================== ROTATION & MOVEMENT ANIMATIONS ======================================== */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @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 shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); } 20%, 40%, 60%, 80% { transform: translateX(10px); } } @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(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } to { transform: scale3d(1, 1, 1); } } /* ======================================== SLIDE ANIMATIONS ======================================== */ @keyframes slideInLeft { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slideInUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ======================================== PREMIUM EFFECT ANIMATIONS ======================================== */ @keyframes glow { 0%, 100% { box-shadow: 0 0 5px var(--gold), 0 0 10px var(--gold), 0 0 15px var(--gold), 0 0 20px var(--gold); } 50% { box-shadow: 0 0 10px var(--gold), 0 0 20px var(--gold), 0 0 30px var(--gold), 0 0 40px var(--gold); } } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes shimmer { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-20px); } } @keyframes typewriter { from { width: 0; } to { width: 100%; } } @keyframes cursorBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } @keyframes neonFlicker { 0%, 18%, 22%, 25%, 53%, 57%, 100% { text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #fff, 0 0 40px var(--electric-blue), 0 0 80px var(--electric-blue), 0 0 90px var(--electric-blue), 0 0 100px var(--electric-blue), 0 0 150px var(--electric-blue); } 20%, 24%, 55% { text-shadow: none; } } @keyframes morphBlob { 0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 50% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; } } @keyframes particleFloat { 0% { opacity: 0; transform: translateY(100vh) scale(0); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(-100vh) scale(1); } } @keyframes progressFill { from { width: 0%; } to { width: 100%; } } @keyframes counterUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ======================================== UTILITY CLASSES ======================================== */ /* Basic Animation Classes */ .animate-fadeIn { animation: fadeIn var(--timing-normal) var(--ease-smooth); } .animate-fadeInUp { animation: fadeInUp var(--timing-normal) var(--ease-smooth); } .animate-fadeInDown { animation: fadeInDown var(--timing-normal) var(--ease-smooth); } .animate-fadeInLeft { animation: fadeInLeft var(--timing-normal) var(--ease-smooth); } .animate-fadeInRight { animation: fadeInRight var(--timing-normal) var(--ease-smooth); } .animate-scaleIn { animation: scaleIn var(--timing-normal) var(--ease-bounce); } .animate-scaleOut { animation: scaleOut var(--timing-normal) var(--ease-smooth); } .animate-pulse { animation: pulse var(--timing-extra-slow) ease-in-out infinite; } .animate-heartbeat { animation: heartbeat var(--timing-slow) ease-in-out infinite; } .animate-bounce { animation: bounce var(--timing-slow) infinite; } .animate-spin { animation: spin var(--timing-slow) linear infinite; } .animate-wobble { animation: wobble var(--timing-slow) ease-in-out; } .animate-shake { animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97); } .animate-rubberBand { animation: rubberBand var(--timing-slow) var(--ease-elastic); } .animate-slideInLeft { animation: slideInLeft var(--timing-normal) var(--ease-smooth); } .animate-slideInRight { animation: slideInRight var(--timing-normal) var(--ease-smooth); } .animate-slideInUp { animation: slideInUp var(--timing-normal) var(--ease-smooth); } .animate-glow { animation: glow var(--timing-extra-slow) ease-in-out infinite alternate; } .animate-shimmer { animation: shimmer 1.6s linear infinite; } .animate-float { animation: float 3s ease-in-out infinite; } .animate-neonFlicker { animation: neonFlicker 1.5s infinite alternate; } .animate-morphBlob { animation: morphBlob 3s ease-in-out infinite; } .animate-particleFloat { animation: particleFloat 8s linear infinite; } .animate-progressFill { animation: progressFill 2s var(--ease-smooth) forwards; } /* ======================================== DELAY UTILITIES ======================================== */ .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; } .delay-300 { animation-delay: 0.3s; } .delay-400 { animation-delay: 0.4s; } .delay-500 { animation-delay: 0.5s; } .delay-600 { animation-delay: 0.6s; } .delay-700 { animation-delay: 0.7s; } .delay-800 { animation-delay: 0.8s; } .delay-900 { animation-delay: 0.9s; } .delay-1000 { animation-delay: 1s; } /* ======================================== DURATION UTILITIES ======================================== */ .duration-fast { animation-duration: var(--timing-fast); } .duration-normal { animation-duration: var(--timing-normal); } .duration-slow { animation-duration: var(--timing-slow); } .duration-extra-slow { animation-duration: var(--timing-extra-slow); } /* ======================================== HOVER ANIMATION CLASSES ======================================== */ .hover-lift { transition: transform var(--timing-fast) var(--ease-smooth); } .hover-lift:hover { transform: translateY(-8px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); } .hover-scale { transition: transform var(--timing-fast) var(--ease-smooth); } .hover-scale:hover { transform: scale(1.05); } .hover-glow { transition: box-shadow var(--timing-fast) ease-in-out; } .hover-glow:hover { box-shadow: 0 0 10px var(--gold), 0 0 20px var(--gold), 0 0 30px var(--gold); } .hover-pulse:hover { animation: pulse 0.5s ease-in-out; } .hover-shake:hover { animation: shake 0.5s ease-in-out; } .hover-wobble:hover { animation: wobble 0.8s ease-in-out; } .hover-neon { transition: all var(--timing-fast) ease-in-out; color: var(--platinum); } .hover-neon:hover { color: var(--electric-blue); text-shadow: 0 0 5px var(--electric-blue), 0 0 10px var(--electric-blue), 0 0 15px var(--electric-blue), 0 0 20px var(--electric-blue); } /* ========