/* ========================================================== ANIMATION.CSS PART 1/5 Fade • Slide • Zoom ========================================================== */ /* ========================================================== DEFAULT ANIMATION SETTINGS ========================================================== */ .animated{ animation-duration:.8s; animation-fill-mode:both; animation-timing-function:ease; } .animate-fast{ animation-duration:.4s; } .animate-normal{ animation-duration:.8s; } .animate-slow{ animation-duration:1.2s; } /* ========================================================== FADE IN ========================================================== */ .fade-in{ animation-name:fadeIn; } @keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } } /* ========================================================== FADE UP ========================================================== */ .fade-up{ animation-name:fadeUp; } @keyframes fadeUp{ from{ opacity:0; transform:translateY(40px); } to{ opacity:1; transform:translateY(0); } } /* ========================================================== FADE DOWN ========================================================== */ .fade-down{ animation-name:fadeDown; } @keyframes fadeDown{ from{ opacity:0; transform:translateY(-40px); } to{ opacity:1; transform:translateY(0); } } /* ========================================================== FADE LEFT ========================================================== */ .fade-left{ animation-name:fadeLeft; } @keyframes fadeLeft{ from{ opacity:0; transform:translateX(-40px); } to{ opacity:1; transform:translateX(0); } } /* ========================================================== FADE RIGHT ========================================================== */ .fade-right{ animation-name:fadeRight; } @keyframes fadeRight{ from{ opacity:0; transform:translateX(40px); } to{ opacity:1; transform:translateX(0); } } /* ========================================================== SLIDE UP ========================================================== */ .slide-up{ animation-name:slideUp; } @keyframes slideUp{ from{ transform:translateY(80px); opacity:0; } to{ transform:translateY(0); opacity:1; } } /* ========================================================== SLIDE DOWN ========================================================== */ .slide-down{ animation-name:slideDown; } @keyframes slideDown{ from{ transform:translateY(-80px); opacity:0; } to{ transform:translateY(0); opacity:1; } } /* ========================================================== SLIDE LEFT ========================================================== */ .slide-left{ animation-name:slideLeft; } @keyframes slideLeft{ from{ transform:translateX(-80px); opacity:0; } to{ transform:translateX(0); opacity:1; } } /* ========================================================== SLIDE RIGHT ========================================================== */ .slide-right{ animation-name:slideRight; } @keyframes slideRight{ from{ transform:translateX(80px); opacity:0; } to{ transform:translateX(0); opacity:1; } } /* ========================================================== ZOOM IN ========================================================== */ .zoom-in{ animation-name:zoomIn; } @keyframes zoomIn{ from{ opacity:0; transform:scale(.80); } to{ opacity:1; transform:scale(1); } } /* ========================================================== ZOOM OUT ========================================================== */ .zoom-out{ animation-name:zoomOut; } @keyframes zoomOut{ from{ opacity:0; transform:scale(1.20); } to{ opacity:1; transform:scale(1); } } /* ========================================================== ZOOM FADE ========================================================== */ .zoom-fade{ animation-name:zoomFade; } @keyframes zoomFade{ from{ opacity:0; transform:scale(.9) translateY(20px); } to{ opacity:1; transform:scale(1) translateY(0); } } /* ========================================================== ANIMATION.CSS PART 2/5 Rotate • Bounce • Pulse • Float ========================================================== */ /* ========================================================== ROTATE ========================================================== */ .rotate{ animation-name:rotate; } @keyframes rotate{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } /* ========================================================== ROTATE IN ========================================================== */ .rotate-in{ animation-name:rotateIn; } @keyframes rotateIn{ from{ opacity:0; transform:rotate(-180deg) scale(.8); } to{ opacity:1; transform:rotate(0) scale(1); } } /* ========================================================== BOUNCE ========================================================== */ .bounce{ animation-name:bounce; transform-origin:center bottom; } @keyframes bounce{ 0%,20%,53%,80%,100%{ transform:translateY(0); } 40%,43%{ transform:translateY(-30px); } 70%{ transform:translateY(-15px); } 90%{ transform:translateY(-6px); } } /* ========================================================== PULSE ========================================================== */ .pulse{ animation-name:pulse; animation-iteration-count:infinite; } @keyframes pulse{ 0%{ transform:scale(1); } 50%{ transform:scale(1.06); } 100%{ transform:scale(1); } } /* ========================================================== FLOAT ========================================================== */ .float{ animation-name:float; animation-duration:3s; animation-iteration-count:infinite; } @keyframes float{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } 100%{ transform:translateY(0); } } /* ========================================================== SWING ========================================================== */ .swing{ animation-name:swing; transform-origin:top center; } @keyframes swing{ 20%{ transform:rotate(15deg); } 40%{ transform:rotate(-10deg); } 60%{ transform:rotate(5deg); } 80%{ transform:rotate(-5deg); } 100%{ transform:rotate(0deg); } } /* ========================================================== SHAKE ========================================================== */ .shake{ animation-name:shake; } @keyframes shake{ 0%,100%{ transform:translateX(0); } 20%{ transform:translateX(-8px); } 40%{ transform:translateX(8px); } 60%{ transform:translateX(-6px); } 80%{ transform:translateX(6px); } } /* ========================================================== HEART BEAT ========================================================== */ .heartbeat{ animation-name:heartbeat; animation-duration:1.5s; animation-iteration-count:infinite; } @keyframes heartbeat{ 0%{ transform:scale(1); } 14%{ transform:scale(1.15); } 28%{ transform:scale(1); } 42%{ transform:scale(1.15); } 70%{ transform:scale(1); } } /* ========================================================== WOBBLE ========================================================== */ .wobble{ animation-name:wobble; } @keyframes wobble{ 15%{ transform:translateX(-20px) rotate(-5deg); } 30%{ transform:translateX(15px) rotate(3deg); } 45%{ transform:translateX(-10px) rotate(-3deg); } 60%{ transform:translateX(6px) rotate(2deg); } 75%{ transform:translateX(-3px) rotate(-1deg); } 100%{ transform:none; } } /* ========================================================== FLASH ========================================================== */ .flash{ animation-name:flash; } @keyframes flash{ 0%,50%,100%{ opacity:1; } 25%,75%{ opacity:.2; } } /* ========================================================== ANIMATION.CSS PART 3/5 Hover • Cards • Buttons • Images ========================================================== */ /* ========================================================== CARD HOVER ========================================================== */ .card-hover{ transition:transform .35s ease, box-shadow .35s ease; } .card-hover:hover{ transform:translateY(-10px); box-shadow:0 18px 40px rgba(0,0,0,.15); } /* ========================================================== CARD ZOOM ========================================================== */ .card-zoom{ overflow:hidden; border-radius:inherit; } .card-zoom img{ transition:transform .5s ease; } .card-zoom:hover img{ transform:scale(1.08); } /* ========================================================== BUTTON LIFT ========================================================== */ .btn-lift{ transition:all .3s ease; } .btn-lift:hover{ transform:translateY(-3px); } .btn-lift:active{ transform:translateY(0); } /* ========================================================== BUTTON SCALE ========================================================== */ .btn-scale{ transition:transform .25s ease; } .btn-scale:hover{ transform:scale(1.05); } .btn-scale:active{ transform:scale(.98); } /* ========================================================== RIPPLE EFFECT ========================================================== */ .btn-ripple{ position:relative; overflow:hidden; } .btn-ripple::after{ content:""; position:absolute; width:0; height:0; left:50%; top:50%; border-radius:50%; background:rgba(255,255,255,.35); transform:translate(-50%,-50%); transition:width .5s ease, height .5s ease; } .btn-ripple:hover::after{ width:320px; height:320px; } /* ========================================================== IMAGE HOVER ========================================================== */ .image-hover{ overflow:hidden; } .image-hover img{ transition:transform .45s ease, filter .45s ease; } .image-hover:hover img{ transform:scale(1.08); } .image-hover-dark:hover img{ filter:brightness(.8); } .image-hover-blur:hover img{ filter:blur(2px); } /* ========================================================== ICON HOVER ========================================================== */ .icon-hover{ transition:transform .3s ease, color .3s ease; } .icon-hover:hover{ transform:translateY(-5px); } /* ========================================================== LINK UNDERLINE ========================================================== */ .link-underline{ position:relative; } .link-underline::after{ content:""; position:absolute; left:0; bottom:-4px; width:0; height:2px; background:currentColor; transition:width .3s ease; } .link-underline:hover::after{ width:100%; } /* ========================================================== NAV LINK ========================================================== */ .nav-hover{ transition:color .3s ease; } .nav-hover:hover{ color:var(--primary); } /* ========================================================== BADGE POP ========================================================== */ .badge-pop:hover{ animation:badgePop .35s ease; } @keyframes badgePop{ 0%{ transform:scale(1); } 50%{ transform:scale(1.2); } 100%{ transform:scale(1); } } /* ========================================================== SHAKE ON HOVER ========================================================== */ .hover-shake:hover{ animation:hoverShake .5s ease; } @keyframes hoverShake{ 20%{ transform:translateX(-4px); } 40%{ transform:translateX(4px); } 60%{ transform:translateX(-3px); } 80%{ transform:translateX(3px); } 100%{ transform:none; } } /* ========================================================== ROTATE HOVER ========================================================== */ .hover-rotate:hover{ transform:rotate(5deg); transition:transform .35s ease; } /* ========================================================== GLOW EFFECT ========================================================== */ .hover-glow{ transition:box-shadow .3s ease; } .hover-glow:hover{ box-shadow:0 0 20px rgba(13,110,253,.35); } /* ========================================================== OPACITY EFFECT ========================================================== */ .hover-fade{ transition:opacity .3s ease; } .hover-fade:hover{ opacity:.8; } /* ========================================================== ANIMATION.CSS PART 4/5 Loader • Spinner • Skeleton • Progress ========================================================== */ /* ========================================================== SPINNER ========================================================== */ .spinner-rotate{ animation:spinnerRotate .9s linear infinite; } @keyframes spinnerRotate{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } /* ========================================================== LOADER PULSE ========================================================== */ .loader-pulse{ animation:loaderPulse 1.2s ease infinite; } @keyframes loaderPulse{ 0%{ transform:scale(.9); opacity:.6; } 50%{ transform:scale(1.1); opacity:1; } 100%{ transform:scale(.9); opacity:.6; } } /* ========================================================== DOTS LOADER ========================================================== */ .loading-dots{ display:inline-flex; gap:6px; } .loading-dots span{ width:8px; height:8px; border-radius:50%; background:currentColor; animation:loadingDots .8s infinite alternate; } .loading-dots span:nth-child(2){ animation-delay:.15s; } .loading-dots span:nth-child(3){ animation-delay:.30s; } @keyframes loadingDots{ from{ transform:translateY(0); opacity:.4; } to{ transform:translateY(-8px); opacity:1; } } /* ========================================================== WAVE LOADER ========================================================== */ .wave-loader{ display:flex; align-items:flex-end; gap:4px; } .wave-loader span{ width:5px; height:30px; background:currentColor; animation:waveLoader 1s infinite ease-in-out; } .wave-loader span:nth-child(2){ animation-delay:.1s; } .wave-loader span:nth-child(3){ animation-delay:.2s; } .wave-loader span:nth-child(4){ animation-delay:.3s; } .wave-loader span:nth-child(5){ animation-delay:.4s; } @keyframes waveLoader{ 0%,100%{ transform:scaleY(.4); } 50%{ transform:scaleY(1); } } /* ========================================================== SKELETON ========================================================== */ .skeleton-loading{ position:relative; overflow:hidden; } .skeleton-loading::after{ content:""; position:absolute; inset:0; transform:translateX(-100%); background:linear-gradient( 90deg, transparent, rgba(255,255,255,.6), transparent ); animation:skeletonMove 1.4s infinite; } @keyframes skeletonMove{ 100%{ transform:translateX(100%); } } /* ========================================================== PROGRESS BAR ========================================================== */ .progress-animated{ overflow:hidden; position:relative; } .progress-animated::after{ content:""; position:absolute; top:0; left:-40%; width:40%; height:100%; background:rgba(255,255,255,.35); animation:progressMove 1.5s linear infinite; } @keyframes progressMove{ to{ left:100%; } } /* ========================================================== TYPING CURSOR ========================================================== */ .typing-cursor{ display:inline-block; width:2px; height:1em; background:currentColor; animation:typingBlink .8s infinite; } @keyframes typingBlink{ 0%,50%{ opacity:1; } 51%,100%{ opacity:0; } } /* ========================================================== BREATHING EFFECT ========================================================== */ .breathing{ animation:breathing 3s ease-in-out infinite; } @keyframes breathing{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.03); } } /* ========================================================== SHIMMER ========================================================== */ .shimmer{ position:relative; overflow:hidden; } .shimmer::before{ content:""; position:absolute; top:0; left:-100%; width:50%; height:100%; background:linear-gradient( 90deg, transparent, rgba(255,255,255,.45), transparent ); animation:shimmerMove 1.6s infinite; } @keyframes shimmerMove{ 100%{ left:150%; } } /* ========================================================== ANIMATION.CSS PART 5/5 Utilities • Delays • Durations • Text Effects ========================================================== */ /* ========================================================== TEXT GRADIENT ========================================================== */ .text-gradient{ background:linear-gradient( 90deg, var(--primary), #6f42c1 ); -webkit-background-clip:text; background-clip:text; color:transparent; } /* ========================================================== TEXT GLOW ========================================================== */ .text-glow{ text-shadow: 0 0 8px rgba(13,110,253,.35), 0 0 18px rgba(13,110,253,.25); } /* ========================================================== REVEAL ========================================================== */ .reveal{ opacity:0; transform:translateY(40px); } .reveal.active{ opacity:1; transform:none; transition: opacity .8s ease, transform .8s ease; } /* ========================================================== ANIMATION DELAYS ========================================================== */ .delay-100{ animation-delay:.1s; } .delay-200{ animation-delay:.2s; } .delay-300{ animation-delay:.3s; } .delay-400{ animation-delay:.4s; } .delay-500{ animation-delay:.5s; } .delay-700{ animation-delay:.7s; } .delay-1000{ animation-delay:1s; } /* ========================================================== ANIMATION DURATIONS ========================================================== */ .duration-300{ animation-duration:.3s; } .duration-500{ animation-duration:.5s; } .duration-700{ animation-duration:.7s; } .duration-1000{ animation-duration:1s; } .duration-1500{ animation-duration:1.5s; } .duration-2000{ animation-duration:2s; } /* ========================================================== ITERATION COUNT ========================================================== */ .animate-once{ animation-iteration-count:1; } .animate-twice{ animation-iteration-count:2; } .animate-infinite{ animation-iteration-count:infinite; } /* ========================================================== DIRECTION ========================================================== */ .direction-normal{ animation-direction:normal; } .direction-reverse{ animation-direction:reverse; } .direction-alternate{ animation-direction:alternate; } .direction-alternate-reverse{ animation-direction:alternate-reverse; } /* ========================================================== PLAY STATE ========================================================== */ .pause-animation{ animation-play-state:paused; } .run-animation{ animation-play-state:running; } /* ========================================================== TIMING FUNCTIONS ========================================================== */ .ease-linear{ animation-timing-function:linear; } .ease-in{ animation-timing-function:ease-in; } .ease-out{ animation-timing-function:ease-out; } .ease-in-out{ animation-timing-function:ease-in-out; } /* ========================================================== HOVER TRIGGER ========================================================== */ .animate-hover:hover{ animation-play-state:running; } .animate-hover{ animation-play-state:paused; } /* ========================================================== REDUCED MOTION SUPPORT ========================================================== */ @media (prefers-reduced-motion:reduce){ .animated, .fade-in, .fade-up, .fade-down, .fade-left, .fade-right, .slide-up, .slide-down, .slide-left, .slide-right, .zoom-in, .zoom-out, .rotate, .bounce, .pulse, .float, .shake, .swing, .heartbeat, .flash{ animation:none !important; transition:none !important; } } /* ========================================================== PERFORMANCE HELPERS ========================================================== */ .will-animate{ will-change:transform, opacity; } .gpu{ transform:translateZ(0); backface-visibility:hidden; perspective:1000px; } /* ========================================================== FINAL UTILITIES ========================================================== */ .animation-fill-both{ animation-fill-mode:both; } .animation-fill-forwards{ animation-fill-mode:forwards; } .animation-fill-backwards{ animation-fill-mode:backwards; } .animation-fill-none{ animation-fill-mode:none; }