/* ========================================================= MYSTIFY ANIMATIONS.CSS PART 4A Core Animations =========================================================*/ /* ===================================== Fade In ===================================== */ .fade-in{ animation:fadeIn .8s ease both; } @keyframes fadeIn{ from{ opacity:0; transform:translateY(25px); } to{ opacity:1; transform:none; } } /* ===================================== Fade Out ===================================== */ .fade-out{ animation:fadeOut .5s forwards; } @keyframes fadeOut{ from{ opacity:1; } to{ opacity:0; } } /* ===================================== Zoom ===================================== */ .zoom-in{ animation:zoomIn .6s ease; } @keyframes zoomIn{ from{ transform:scale(.85); opacity:0; } to{ transform:scale(1); opacity:1; } } /* ===================================== Scale Pop ===================================== */ .pop{ animation:pop .45s ease; } @keyframes pop{ 0%{ transform:scale(.85); } 60%{ transform:scale(1.08); } 100%{ transform:scale(1); } } /* ===================================== Slide Up ===================================== */ .slide-up{ animation:slideUp .7s ease both; } @keyframes slideUp{ from{ transform:translateY(60px); opacity:0; } to{ transform:none; opacity:1; } } /* ===================================== Slide Down ===================================== */ .slide-down{ animation:slideDown .7s ease both; } @keyframes slideDown{ from{ transform:translateY(-60px); opacity:0; } to{ transform:none; opacity:1; } } /* ===================================== Pulse ===================================== */ .pulse{ animation:pulse 2s infinite; } @keyframes pulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.05); } } /* ===================================== Glow ===================================== */ .glow-animation{ animation:glow 2.5s infinite; } @keyframes glow{ 0%{ box-shadow: 0 0 0 rgba(34,211,238,0); } 50%{ box-shadow: 0 0 35px rgba(34,211,238,.45); } 100%{ box-shadow: 0 0 0 rgba(34,211,238,0); } } /* ===================================== Floating ===================================== */ .float{ animation:float 5s ease-in-out infinite; } @keyframes float{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(-18px); } } /* ===================================== Rotation ===================================== */ .rotate{ animation:rotate 12s linear infinite; } @keyframes rotate{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } /* ===================================== Blink ===================================== */ .blink{ animation:blink .8s infinite; } @keyframes blink{ 0%,45%{ opacity:1; } 50%,100%{ opacity:0; } } /* ===================================== Loading Dots ===================================== */ .loading-dots span{ display:inline-block; animation:dotBounce 1s infinite; } .loading-dots span:nth-child(2){ animation-delay:.15s; } .loading-dots span:nth-child(3){ animation-delay:.3s; } @keyframes dotBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } } /* ===================================== Button Hover ===================================== */ .hover-lift{ transition:.3s; } .hover-lift:hover{ transform: translateY(-4px); } /* ===================================== Card Hover ===================================== */ .card-hover{ transition:.35s; } .card-hover:hover{ transform: translateY(-6px) scale(1.02); } /* ===================================== Ripple ===================================== */ .ripple{ position:relative; overflow:hidden; } .ripple::after{ content:""; position:absolute; width:0; height:0; left:50%; top:50%; background: rgba(255,255,255,.2); border-radius:50%; transform: translate(-50%,-50%); transition:.6s; } .ripple:hover::after{ width:300px; height:300px; opacity:0; } /* ========================================================= MYSTIFY ANIMATIONS.CSS PART 4B Cinematic Reveal Effects =========================================================*/ /* ========================================== TYPEWRITER ========================================== */ .typewriter{ overflow:hidden; white-space:nowrap; border-right:3px solid currentColor; width:0; animation: typing 3s steps(40,end) forwards, caret .7s infinite; } @keyframes typing{ from{ width:0; } to{ width:100%; } } @keyframes caret{ 0%,50%{ border-color:currentColor; } 51%,100%{ border-color:transparent; } } /* ========================================== DECRYPT EFFECT ========================================== */ .decrypt{ animation: decryptFlash .08s linear 20; } @keyframes decryptFlash{ 0%{ opacity:.2; filter:blur(2px); } 50%{ opacity:1; filter:none; } 100%{ opacity:.5; } } /* ========================================== GLITCH ========================================== */ .glitch{ position:relative; } .glitch::before, .glitch::after{ content:attr(data-text); position:absolute; inset:0; overflow:hidden; } .glitch::before{ left:2px; color:#00ffff; clip-path:inset(0 0 50% 0); animation:glitchOne .25s infinite; } .glitch::after{ left:-2px; color:#ff0088; clip-path:inset(50% 0 0 0); animation:glitchTwo .25s infinite; } @keyframes glitchOne{ 0%{ transform:translate(0); } 50%{ transform:translate(2px,-2px); } 100%{ transform:translate(0); } } @keyframes glitchTwo{ 0%{ transform:translate(0); } 50%{ transform:translate(-2px,2px); } 100%{ transform:translate(0); } } /* ========================================== SCREEN SHAKE ========================================== */ .shake{ animation:shake .45s; } @keyframes shake{ 0%{transform:translateX(0);} 20%{transform:translateX(-8px);} 40%{transform:translateX(8px);} 60%{transform:translateX(-5px);} 80%{transform:translateX(5px);} 100%{transform:translateX(0);} } /* ========================================== REVEAL FLASH ========================================== */ .flash{ animation:flash .5s; } @keyframes flash{ 0%{ filter:brightness(3); } 100%{ filter:brightness(1); } } /* ========================================== MATRIX RAIN ========================================== */ .matrix-column{ position:absolute; top:-100%; color:#00ff88; font-size:14px; font-family:monospace; opacity:.18; animation:matrixFall linear infinite; } @keyframes matrixFall{ from{ transform:translateY(-100vh); } to{ transform:translateY(200vh); } } /* ========================================== STAR TWINKLE ========================================== */ .star{ position:absolute; width:3px; height:3px; border-radius:50%; background:white; animation:twinkle 2s infinite; } @keyframes twinkle{ 0%,100%{ opacity:.2; transform:scale(.5); } 50%{ opacity:1; transform:scale(1.5); } } /* ========================================== MAGIC PARTICLES ========================================== */ .particle{ position:absolute; width:8px; height:8px; border-radius:50%; background:white; animation:particleUp linear infinite; } @keyframes particleUp{ from{ transform: translateY(100vh) scale(.2); opacity:0; } 30%{ opacity:1; } to{ transform: translateY(-150px) scale(1); opacity:0; } } /* ========================================== SIGNAL PULSE ========================================== */ .signal-ring{ position:absolute; border:2px solid rgba(255,255,255,.35); border-radius:50%; animation:signalPulse 3s linear infinite; } @keyframes signalPulse{ from{ transform:scale(.3); opacity:1; } to{ transform:scale(4); opacity:0; } } /* ========================================== CONFETTI ========================================== */ .confetti{ position:absolute; width:10px; height:14px; animation:confettiFall linear forwards; } @keyframes confettiFall{ from{ transform: translateY(-100px) rotate(0deg); } to{ transform: translateY(110vh) rotate(720deg); } } /* ========================================== SPARK BURST ========================================== */ .spark{ position:absolute; width:4px; height:4px; border-radius:50%; background:white; animation:spark .8s ease-out forwards; } @keyframes spark{ from{ opacity:1; transform: scale(1); } to{ opacity:0; transform: translate(var(--x),var(--y)) scale(0); } } /* ========================================== HOLOGRAM ========================================== */ .hologram{ animation:hologram 2s infinite; } @keyframes hologram{ 0%,100%{ opacity:1; } 25%{ opacity:.92; } 26%{ transform:translateX(2px); } 27%{ transform:translateX(-2px); } 50%{ opacity:.97; } } /* ========================================================== MYSTIFY ANIMATIONS.CSS PART 4C Final Animation Library ========================================================== */ /* ========================================================== Emoji Pop ========================================================== */ .emoji-pop{ display:inline-block; animation:emojiPop .7s ease; } @keyframes emojiPop{ 0%{ transform:scale(.2) rotate(-30deg); opacity:0; } 60%{ transform:scale(1.35) rotate(12deg); opacity:1; } 100%{ transform:scale(1); } } /* ========================================================== Heart Beat ========================================================== */ .heartbeat{ animation:heartbeat 1s infinite; } @keyframes heartbeat{ 0%,100%{ transform:scale(1); } 20%{ transform:scale(1.18); } 40%{ transform:scale(.95); } 60%{ transform:scale(1.1); } } /* ========================================================== Fire Glow ========================================================== */ .fire-glow{ animation:fireGlow 2s infinite; } @keyframes fireGlow{ 0%{ text-shadow: 0 0 5px #ff6600; } 50%{ text-shadow: 0 0 10px #ff3300, 0 0 25px orange, 0 0 45px yellow; } 100%{ text-shadow: 0 0 5px #ff6600; } } /* ========================================================== Floating Wave ========================================================== */ .wave{ animation:wave 4s ease-in-out infinite; } @keyframes wave{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } } /* ========================================================== Reveal Progress ========================================================== */ .progress-grow{ transform-origin:left; animation:progressGrow 3s linear forwards; } @keyframes progressGrow{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } } /* ========================================================== Success Bounce ========================================================== */ .success{ animation:success .8s; } @keyframes success{ 0%{ transform:scale(.6); opacity:0; } 60%{ transform:scale(1.15); } 100%{ transform:scale(1); opacity:1; } } /* ========================================================== Mouse Tilt Helper ========================================================== */ .parallax{ transition: transform .2s ease; will-change:transform; } /* ========================================================== Rotate Hover ========================================================== */ .rotate-hover{ transition:.35s; } .rotate-hover:hover{ transform: rotate(6deg) scale(1.04); } /* ========================================================== Blur Reveal ========================================================== */ .blur-reveal{ animation:blurReveal .8s ease; } @keyframes blurReveal{ from{ filter:blur(14px); opacity:0; } to{ filter:none; opacity:1; } } /* ========================================================== Fade Scale ========================================================== */ .fade-scale{ animation:fadeScale .7s; } @keyframes fadeScale{ from{ opacity:0; transform: scale(.92); } to{ opacity:1; transform:scale(1); } } /* ========================================================== Floating Background ========================================================== */ .bg-float{ animation:bgFloat 14s ease-in-out infinite; } @keyframes bgFloat{ 0%,100%{ transform: translate(0,0); } 25%{ transform: translate(20px,-20px); } 50%{ transform: translate(-15px,20px); } 75%{ transform: translate(15px,-15px); } } /* ========================================================== Notification Slide ========================================================== */ .toast{ animation:toast .5s ease; } @keyframes toast{ from{ transform: translateY(-30px); opacity:0; } to{ transform:none; opacity:1; } } /* ========================================================== Reveal Flash Overlay ========================================================== */ .flash-overlay{ position:fixed; inset:0; background:white; opacity:0; pointer-events:none; animation:flashOverlay .6s; } @keyframes flashOverlay{ 0%{ opacity:1; } 100%{ opacity:0; } } /* ========================================================== Page Enter ========================================================== */ .page-enter{ animation:pageEnter .8s ease; } @keyframes pageEnter{ from{ opacity:0; transform: translateY(30px); } to{ opacity:1; transform:none; } } /* ========================================================== Page Exit ========================================================== */ .page-exit{ animation:pageExit .4s forwards; } @keyframes pageExit{ to{ opacity:0; transform: scale(.95); } } /* ========================================================== Utility Delays ========================================================== */ .delay-1{ animation-delay:.2s; } .delay-2{ animation-delay:.4s; } .delay-3{ animation-delay:.6s; } .delay-4{ animation-delay:.8s; } .delay-5{ animation-delay:1s; } /* ========================================================== GPU Optimization ========================================================== */ .animate-gpu{ transform:translateZ(0); will-change: transform, opacity; }