.welcomeScreen{ position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 10000; background-color: #fff; display: flex; align-items: center; justify-content: center; } .welcomeScreen{ animation: fadeOut 0.9s forwards; animation-delay: 3s; } .innerWelcomeScreen{ display: flex; flex-direction: column; } .textWelcomeScreen{ text-align: center; } .textWelcomeScreen.text span { display: inline-block; opacity: 0; transform: translateY(20px); animation: rise 0.5s forwards; font-size: 60px; font-weight: 100; color: #8044A6; } .textWelcomeScreen.title span { display: inline-block; opacity: 0; transform: translateY(20px); animation: fall 0.9s forwards; font-size: 120px; } @keyframes rise { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes fadeOut { 0% { opacity: 1; } 99% { opacity: 0; } 100% { display: none; } } @keyframes fall { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } }