@keyframes slideOut { from { opacity: 1; } to { opacity: 0; } } @keyframes slideIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .fade-out { animation-name: fadeOut; animation-duration: 2s; animation-delay: 0.4s; animation-fill-mode: forwards; } .fade-in { animation-name: fadein; animation-duration: 2s; animation-delay: 0.4s; animation-fill-mode: forwards; } @keyframes fillProgress { 0% { transform: scaleX(0); } 75% { opacity: 1; } 100% { opacity: 0; transform: scaleX(1); } }