/*===================================================== IIT HYDERABAD RESEARCH PORTAL animations.css PART - 1 ======================================================*/ /*===================================================== GLOBAL TRANSITIONS ======================================================*/ *{ transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease; } /*===================================================== FADE IN ======================================================*/ @keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } } .fade-in{ animation:fadeIn .8s ease forwards; } /*===================================================== FADE UP ======================================================*/ @keyframes fadeUp{ from{ opacity:0; transform:translateY(50px); } to{ opacity:1; transform:translateY(0); } } .fade-up{ animation:fadeUp .8s ease forwards; } /*===================================================== FADE DOWN ======================================================*/ @keyframes fadeDown{ from{ opacity:0; transform:translateY(-40px); } to{ opacity:1; transform:translateY(0); } } .fade-down{ animation:fadeDown .8s ease forwards; } /*===================================================== FADE LEFT ======================================================*/ @keyframes fadeLeft{ from{ opacity:0; transform:translateX(-60px); } to{ opacity:1; transform:translateX(0); } } .fade-left{ animation:fadeLeft .9s ease forwards; } /*===================================================== FADE RIGHT ======================================================*/ @keyframes fadeRight{ from{ opacity:0; transform:translateX(60px); } to{ opacity:1; transform:translateX(0); } } .fade-right{ animation:fadeRight .9s ease forwards; } /*===================================================== ZOOM IN ======================================================*/ @keyframes zoomIn{ from{ opacity:0; transform:scale(.8); } to{ opacity:1; transform:scale(1); } } .zoom-in{ animation:zoomIn .7s ease forwards; } /*===================================================== ZOOM OUT ======================================================*/ @keyframes zoomOut{ from{ opacity:0; transform:scale(1.2); } to{ opacity:1; transform:scale(1); } } .zoom-out{ animation:zoomOut .7s ease forwards; } /*===================================================== HERO TITLE ANIMATION ======================================================*/ .hero-title{ animation:fadeUp 1s ease; } .hero-subtitle{ animation:fadeUp 1.4s ease; } .hero-buttons{ animation:fadeUp 1.8s ease; } /*===================================================== FLOATING ======================================================*/ @keyframes floating{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } 100%{ transform:translateY(0); } } .floating{ animation:floating 4s ease-in-out infinite; } /*===================================================== SLOW FLOAT ======================================================*/ @keyframes slowFloat{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-20px); } 100%{ transform:translateY(0); } } .float-slow{ animation:slowFloat 6s ease-in-out infinite; } /*===================================================== BOUNCE ======================================================*/ @keyframes bounce{ 0%,20%,50%,80%,100%{ transform:translateY(0); } 40%{ transform:translateY(-15px); } 60%{ transform:translateY(-8px); } } .bounce{ animation:bounce 2s infinite; } /*===================================================== PULSE ======================================================*/ @keyframes pulse{ 0%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.08); opacity:.8; } 100%{ transform:scale(1); opacity:1; } } .pulse{ animation:pulse 2s infinite; } /*===================================================== GLOW PULSE ======================================================*/ @keyframes glowPulse{ 0%{ box-shadow:0 0 0 rgba(11,79,140,.3); } 50%{ box-shadow:0 0 25px rgba(11,79,140,.35); } 100%{ box-shadow:0 0 0 rgba(11,79,140,.3); } } .glow{ animation:glowPulse 2.5s infinite; } /*===================================================== ROTATE ======================================================*/ @keyframes rotate360{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } .rotate{ animation:rotate360 12s linear infinite; } /*===================================================== SHAKE ======================================================*/ @keyframes shake{ 0%{ transform:translateX(0); } 25%{ transform:translateX(-4px); } 50%{ transform:translateX(4px); } 75%{ transform:translateX(-4px); } 100%{ transform:translateX(0); } } .shake{ animation:shake .4s; } /*===================================================== WIGGLE ======================================================*/ @keyframes wiggle{ 0%{ transform:rotate(0); } 25%{ transform:rotate(-3deg); } 50%{ transform:rotate(3deg); } 75%{ transform:rotate(-2deg); } 100%{ transform:rotate(0); } } .wiggle:hover{ animation:wiggle .5s; } /*===================================================== HEARTBEAT ======================================================*/ @keyframes heartbeat{ 0%{ transform:scale(1); } 25%{ transform:scale(1.08); } 40%{ transform:scale(1); } 60%{ transform:scale(1.08); } 100%{ transform:scale(1); } } .heartbeat{ animation:heartbeat 1.8s infinite; } /*===================================================== SCALE HOVER ======================================================*/ .scale-hover{ transition:transform .35s ease; } .scale-hover:hover{ transform:scale(1.05); } /*===================================================== LIFT HOVER ======================================================*/ .lift-hover{ transition:all .35s ease; } .lift-hover:hover{ transform:translateY(-10px); box-shadow:0 18px 40px rgba(0,0,0,.15); } /*===================================================== IMAGE ZOOM ======================================================*/ .img-zoom{ overflow:hidden; } .img-zoom img{ transition:transform .6s ease; } .img-zoom:hover img{ transform:scale(1.12); } /*===================================================== STAGGER 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; } /*===================================================== PAGE LOAD ======================================================*/ .page-load{ animation:fadeIn .8s ease; } /*===================================================== SMOOTH SCROLL TARGET ======================================================*/ .reveal{ opacity:0; transform:translateY(40px); } .reveal.active{ opacity:1; transform:translateY(0); transition:all .8s ease; }/*===================================================== IIT HYDERABAD RESEARCH PORTAL animations.css PART - 2 ======================================================*/ /*===================================================== BUTTON RIPPLE ======================================================*/ .btn{ position:relative; overflow:hidden; } .btn::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 .6s,height .6s; } .btn:active::after{ width:320px; height:320px; } /*===================================================== LOADING SPINNER ======================================================*/ @keyframes spin{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } } .spinner{ width:55px; height:55px; border:6px solid #ddd; border-top:6px solid var(--primary); border-radius:50%; animation:spin .8s linear infinite; } /*===================================================== SHIMMER EFFECT ======================================================*/ @keyframes shimmer{ 0%{ background-position:-500px 0; } 100%{ background-position:500px 0; } } .skeleton{ background:linear-gradient( 90deg, #ececec 25%, #f7f7f7 50%, #ececec 75% ); background-size:800px 100%; animation:shimmer 1.6s infinite linear; } /*===================================================== MARQUEE ======================================================*/ @keyframes marquee{ 0%{ transform:translateX(100%); } 100%{ transform:translateX(-100%); } } .marquee{ white-space:nowrap; display:inline-block; animation:marquee 18s linear infinite; } /*===================================================== TYPING ======================================================*/ @keyframes typing{ from{ width:0; } to{ width:100%; } } .typing{ overflow:hidden; white-space:nowrap; animation:typing 4s steps(40,end); } /*===================================================== BLINKING CURSOR ======================================================*/ @keyframes blink{ 50%{ border-color:transparent; } } .cursor{ border-right:3px solid var(--primary); animation:blink .8s infinite; } /*===================================================== COUNTER POP ======================================================*/ @keyframes counterPop{ 0%{ transform:scale(.4); opacity:0; } 70%{ transform:scale(1.15); } 100%{ transform:scale(1); opacity:1; } } .counter{ animation:counterPop .8s ease; } /*===================================================== CARD HOVER ======================================================*/ .card{ transition:.35s; } .card:hover{ transform:translateY(-10px); box-shadow:0 18px 40px rgba(0,0,0,.15); } /*===================================================== ICON ROTATE ======================================================*/ .icon-rotate:hover{ transform:rotate(360deg); transition:transform .8s ease; } /*===================================================== NAVBAR UNDERLINE ======================================================*/ .navbar a{ position:relative; } .navbar a::after{ content:""; position:absolute; left:0; bottom:8px; width:0; height:2px; background:#fff; transition:.35s; } .navbar a:hover::after{ width:100%; } /*===================================================== CAROUSEL FADE ======================================================*/ .carousel-slide{ animation:fadeIn 1s ease; } /*===================================================== GRADIENT ANIMATION ======================================================*/ @keyframes gradientMove{ 0%{ background-position:0 50%; } 50%{ background-position:100% 50%; } 100%{ background-position:0 50%; } } .animated-gradient{ background-size:300% 300%; animation:gradientMove 10s ease infinite; } /*===================================================== BACK TO TOP ======================================================*/ .back-to-top{ animation:floating 3s infinite; } /*===================================================== FLOATING ACTION BUTTON ======================================================*/ .fab{ animation:pulse 2s infinite; } /*===================================================== NOTIFICATION ======================================================*/ @keyframes slideNotification{ from{ transform:translateX(120%); opacity:0; } to{ transform:translateX(0); opacity:1; } } .notification{ animation:slideNotification .6s ease; } /*===================================================== SUCCESS CHECK ======================================================*/ @keyframes successScale{ 0%{ transform:scale(.5); opacity:0; } 100%{ transform:scale(1); opacity:1; } } .success{ animation:successScale .5s ease; } /*===================================================== PROGRESS BAR ======================================================*/ @keyframes progress{ from{ width:0; } to{ width:100%; } } .progress-bar{ animation:progress 2s linear forwards; } /*===================================================== IMAGE FADE ======================================================*/ .gallery img{ transition:transform .6s ease, opacity .6s ease; } .gallery img:hover{ transform:scale(1.08); opacity:.92; } /*===================================================== BUTTON PRESS ======================================================*/ .btn:active{ transform:scale(.96); } /*===================================================== TABLE ROW ======================================================*/ .data-table tbody tr{ transition:background .25s ease, transform .2s ease; } .data-table tbody tr:hover{ transform:scale(1.01); } /*===================================================== SECTION REVEAL ======================================================*/ .section-hidden{ opacity:0; transform:translateY(70px); } .section-show{ opacity:1; transform:translateY(0); transition:all .9s ease; } /*===================================================== ROTATING BORDER ======================================================*/ @keyframes borderRotate{ from{ transform:rotate(0); } to{ transform:rotate(360deg); } } .rotating-border{ position:relative; } .rotating-border::before{ content:""; position:absolute; inset:-2px; border:2px solid var(--primary); border-radius:inherit; animation:borderRotate 10s linear infinite; } /*===================================================== GLASS HOVER ======================================================*/ .glass-hover{ transition:.4s; } .glass-hover:hover{ backdrop-filter:blur(12px); transform:translateY(-8px); } /*===================================================== 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; } /*===================================================== DURATION ======================================================*/ .fast{ animation-duration:.4s; } .normal{ animation-duration:.8s; } .slow{ animation-duration:1.5s; } /*===================================================== INFINITE ======================================================*/ .infinite{ animation-iteration-count:infinite; } /*===================================================== PAUSE ON HOVER ======================================================*/ .pause-hover:hover{ animation-play-state:paused; } /*===================================================== REDUCED MOTION ======================================================*/ @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }