/* --- Utils --- */ .anim-delay-100 { animation-delay: 100ms !important; } .anim-delay-200 { animation-delay: 200ms !important; } .anim-delay-300 { animation-delay: 300ms !important; } .anim-delay-400 { animation-delay: 400ms !important; } .anim-delay-500 { animation-delay: 500ms !important; } .anim-delay-600 { animation-delay: 600ms !important; } .anim-delay-700 { animation-delay: 700ms !important; } .anim-delay-800 { animation-delay: 800ms !important; } .anim-dur-500 { animation-duration: 500ms !important; } /* --- Components --- */ .home-section { animation: transition-up 500ms ease; animation-fill-mode: backwards; } .button { --anim-offset: 1.5rem; animation: transition-up 250ms ease; animation-fill-mode: backwards; } .home-section h2 { --anim-offset: 1rem; animation: transition-left 500ms ease; animation-fill-mode: backwards; } /* --- Keys --- */ @keyframes transition-up { from { transform: translateY(var(--anim-offset, 3rem)); opacity: 0; } to { opacity: 1; transform: translateY(0); } } @keyframes transition-left { from { transform: translateX(var(--anim-offset, 3rem)); opacity: 0; } to { opacity: 1; transform: translateX(0); } } .home-lhs { animation: transition-lhs 500ms ease; animation-fill-mode: backwards; } @keyframes transition-lhs { from { min-width: 60vw; max-width: 60vw; } to { min-width: 58vw; max-width: 58vw; } }