/* ========================== REVEAL ANIMATIONS ========================== */ .reveal{ opacity:0; transform:translateY(80px); transition:all 1s ease; } .reveal.active{ opacity:1; transform:translateY(0); } /* Fade Left */ .fade-left{ opacity:0; transform:translateX(-80px); transition:all 1s ease; } .fade-left.active{ opacity:1; transform:translateX(0); } /* Fade Right */ .fade-right{ opacity:0; transform:translateX(80px); transition:all 1s ease; } .fade-right.active{ opacity:1; transform:translateX(0); } /* Zoom */ .zoom{ opacity:0; transform:scale(.8); transition:all 1s ease; } .zoom.active{ opacity:1; transform:scale(1); } /* Hero Zoom Effect */ .slide{ animation:heroZoom 12s linear infinite; } @keyframes heroZoom{ 0%{ transform:scale(1); } 100%{ transform:scale(1.08); } } /* Floating Effect */ .float{ animation:float 4s ease-in-out infinite; } @keyframes float{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } 100%{ transform:translateY(0); } } /* Pulse */ .pulse{ animation:pulse 2s infinite; } @keyframes pulse{ 0%{ transform:scale(1); } 50%{ transform:scale(1.05); } 100%{ transform:scale(1); } }