body { font-family:Montserrat, sans-serif; } .mask > .row { display: flex; justify-content: center; align-items: center; height: 100vh; } #logo-mask-icon { width: 200px; max-width: 30%; transform-origin: center; animation: PreloaderLogoRotate; animation-duration: 2.4s; animation-fill-mode: forwards; opacity: 0; } #logo-mask { width: 485px; max-width: 50%; position: absolute; left: 0; right: 0; margin-left: auto; margin-right: auto; top: 38%; } @keyframes PreloaderLogoRotate { 0% { transform: scale(3) rotate(-180deg); opacity: 1; } 70% { transform: scale(3) rotate(0deg); opacity: 1; } 85% { transform: scale(1) rotate(0deg); opacity: 0.7; } to { transform: scale(1) rotate(0deg); opacity: 0; } }