/*========================================================== AISUBIO ANIMATIONS Version : 3.0 Premium ==========================================================*/ /*========================================================== FLOATING ==========================================================*/ @keyframes floating{ 0%{ transform: translate3d(0,0,0) rotate(0deg); } 50%{ transform: translate3d(0,-14px,0) rotate(2deg); } 100%{ transform: translate3d(0,0,0) rotate(0deg); } } /*========================================================== FADE UP ==========================================================*/ @keyframes fadeUp{ from{ opacity:0; transform: translate3d(0,40px,0); } to{ opacity:1; transform: translate3d(0,0,0); } } /*========================================================== FADE DOWN ==========================================================*/ @keyframes fadeDown{ from{ opacity:0; transform: translate3d(0,-40px,0); } to{ opacity:1; transform: translate3d(0,0,0); } } /*========================================================== FADE LEFT ==========================================================*/ @keyframes fadeLeft{ from{ opacity:0; transform: translate3d(-40px,0,0); } to{ opacity:1; transform: translate3d(0,0,0); } } /*========================================================== FADE RIGHT ==========================================================*/ @keyframes fadeRight{ from{ opacity:0; transform: translate3d(40px,0,0); } to{ opacity:1; transform: translate3d(0,0,0); } } /*========================================================== SCALE IN ==========================================================*/ @keyframes scaleIn{ from{ opacity:0; transform: scale(.92); } to{ opacity:1; transform: scale(1); } } /*========================================================== ZOOM OUT ==========================================================*/ @keyframes zoomOut{ from{ opacity:0; transform: scale(1.12); } to{ opacity:1; transform: scale(1); } } /*========================================================== BOUNCE IN ==========================================================*/ @keyframes bounceIn{ 0%{ opacity:0; transform: scale(.72); } 60%{ opacity:1; transform: scale(1.06); } 80%{ transform: scale(.97); } 100%{ transform: scale(1); } } /*========================================================== SLIDE UP ==========================================================*/ @keyframes slideUp{ from{ opacity:0; transform: translate3d(0,70px,0); } to{ opacity:1; transform: translate3d(0,0,0); } } /*========================================================== MODAL IN ==========================================================*/ @keyframes modalIn{ from{ opacity:0; transform: translate3d(0,30px,0) scale(.95); } to{ opacity:1; transform: translate3d(0,0,0) scale(1); } } /*========================================================== TOAST IN ==========================================================*/ @keyframes toastIn{ 0%{ opacity:0; transform: translate3d(48px,0,0) scale(.96); } 100%{ opacity:1; transform: translate3d(0,0,0) scale(1); } } /*========================================================== TOAST OUT ==========================================================*/ @keyframes toastOut{ 0%{ opacity:1; transform: translate3d(0,0,0) scale(1); } 100%{ opacity:0; transform: translate3d(48px,0,0) scale(.96); } } /*========================================================== SKELETON LOADING ==========================================================*/ @keyframes skeletonLoading{ from{ transform:translateX(-100%); } to{ transform:translateX(100%); } } /*========================================================== SPIN ==========================================================*/ @keyframes spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } /*========================================================== LOADER SPIN ==========================================================*/ @keyframes loaderSpin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } /*========================================================== PULSE ==========================================================*/ @keyframes pulse{ 0%{ transform:scale(1); } 50%{ transform:scale(1.06); } 100%{ transform:scale(1); } } /*========================================================== HEARTBEAT ==========================================================*/ @keyframes heartbeat{ 0%{ transform:scale(1); } 14%{ transform:scale(1.14); } 28%{ transform:scale(1); } 42%{ transform:scale(1.14); } 70%{ transform:scale(1); } 100%{ transform:scale(1); } } /*========================================================== SHAKE ==========================================================*/ @keyframes shake{ 0%{ transform:translateX(0); } 20%{ transform:translateX(-6px); } 40%{ transform:translateX(6px); } 60%{ transform:translateX(-4px); } 80%{ transform:translateX(4px); } 100%{ transform:translateX(0); } } /*========================================================== GLOW ==========================================================*/ @keyframes glow{ 0%{ box-shadow: 0 0 0 rgba(37,99,235,.16); } 50%{ box-shadow: 0 0 42px rgba(37,99,235,.36); } 100%{ box-shadow: 0 0 0 rgba(37,99,235,.16); } } /*========================================================== SCROLL PROGRESS ==========================================================*/ @keyframes progress{ from{ width:0; } to{ width:100%; } } /*========================================================== RIPPLE ==========================================================*/ @keyframes ripple{ from{ transform:scale(0); opacity:.45; } to{ transform:scale(4); opacity:0; } } /*========================================================== RIPPLE EFFECT ==========================================================*/ [data-ripple]{ position:relative; overflow:hidden; isolation:isolate; } .ripple{ position:absolute; border-radius:50%; background:rgba(255,255,255,.35); transform:scale(0); pointer-events:none; animation:ripple .6s linear; will-change:transform,opacity; } /*========================================================== SCROLL REVEAL ==========================================================*/ [data-reveal]{ opacity:0; transform:translate3d(0,40px,0); transition: opacity .7s var(--ease-premium), transform .7s var(--ease-premium); will-change:opacity,transform; } [data-reveal].revealed{ opacity:1; transform:translate3d(0,0,0); } /*========================================================== ANIMATION UTILITIES ==========================================================*/ .animate-fade-up{ animation:fadeUp .8s both; } .animate-fade-down{ animation:fadeDown .8s both; } .animate-fade-left{ animation:fadeLeft .8s both; } .animate-fade-right{ animation:fadeRight .8s both; } .animate-scale{ animation:scaleIn .6s both; } .animate-zoom{ animation:zoomOut .7s both; } .animate-slide-up{ animation:slideUp .8s both; } .animate-bounce{ animation:bounceIn .8s both; } .animate-modal{ animation:modalIn .35s both; } .animate-toast{ animation:toastIn .35s both; } /*========================================================== LOOP ANIMATIONS ==========================================================*/ .animate-floating{ animation:floating 5s ease-in-out infinite; } .animate-spin{ animation:spin 1s linear infinite; } .animate-loader{ animation:loaderSpin .9s linear infinite; } .animate-pulse{ animation:pulse 1.4s infinite; } .animate-heartbeat{ animation:heartbeat 1.6s infinite; } .animate-glow{ animation:glow 2.5s ease-in-out infinite; } .animate-shake{ animation:shake .45s; } /*========================================================== HOVER UTILITIES ==========================================================*/ .hover-float{ transition: transform .3s, box-shadow .3s; } .hover-float:hover{ transform:translateY(-6px); } .hover-scale{ transition:transform .3s; } .hover-scale:hover{ transform:scale(1.05); } .hover-rotate{ transition:transform .35s; } .hover-rotate:hover{ transform:rotate(-3deg); } .hover-glow{ transition:box-shadow .35s; } .hover-glow:hover{ box-shadow:0 18px 40px rgba(37,99,235,.25); } /*========================================================== ANIMATION DELAY ==========================================================*/ .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 DURATION ==========================================================*/ .duration-fast{ animation-duration:.3s; } .duration-normal{ animation-duration:.6s; } .duration-slow{ animation-duration:1s; } .duration-slower{ animation-duration:1.5s; } /*========================================================== ITERATION HELPERS ==========================================================*/ .animate-infinite{ animation-iteration-count:infinite; } .animate-once{ animation-iteration-count:1; } .animate-paused{ animation-play-state:paused; } .animate-running{ animation-play-state:running; } /*========================================================== VISIBILITY HELPERS ==========================================================*/ .fade-hidden{ opacity:0; } .fade-visible{ opacity:1; } /*========================================================== PERFORMANCE OPTIMIZATION ==========================================================*/ .animate-floating, .animate-spin, .animate-loader, .animate-pulse, .animate-heartbeat, .animate-glow, .animate-bounce, .animate-scale, .animate-slide-up, .animate-fade-up, .animate-fade-down, .animate-fade-left, .animate-fade-right, .animate-modal, .animate-toast, .hover-float, .hover-scale, .hover-rotate, .hover-glow, [data-reveal], .ripple{ will-change:transform,opacity; transform:translateZ(0); backface-visibility:hidden; perspective:1000px; } /*========================================================== HARDWARE ACCELERATION ==========================================================*/ .offer-card, .hero-card, .btn, .slider-button, .favorite-btn{ transform:translateZ(0); backface-visibility:hidden; } /*========================================================== REDUCED MOTION ==========================================================*/ @media (prefers-reduced-motion:reduce){ *, *::before, *::after{ animation:none !important; transition:none !important; scroll-behavior:auto !important; } } /*========================================================== PRINT ==========================================================*/ @media print{ *{ animation:none !important; transition:none !important; box-shadow:none !important; filter:none !important; } } /*========================================================== END OF ANIMATIONS ==========================================================*/