.anim.fadeIn { opacity: 0; animation-name: fadeIn; animation-duration: 160ms; animation-timing-function: ease-in-out; animation-fill-mode: forwards; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .anim.notification { transform: translate3d(580px, 0, 0); animation-name: notification; animation-duration: 3s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; } @keyframes notification { 0% { transform: translate3d(580px, 0, 0); } 10% { transform: translate3d(0, 0, 0); } 90% { transform: translate3d(0, 0, 0); } 100% { transform: translate3d(580px, 0, 0); } }