body { opacity: 0; -webkit-animation: fadeIn 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.000) 0.2s forwards; animation: fadeIn 0.5s cubic-bezier(0.645, 0.045, 0.355, 1.000) 0.2s forwards; } #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #f6f6f6; display: flex; align-items: center; justify-content: center; -moz-animation: slideOutUp 0.3s ease-out 1.5s forwards; -webkit-animation: slideOutUp 0.3s ease-out 1.5s forwards; animation: slideOutUp 0.3s ease-out 1.5s forwards; z-index: 1000; } #loader-wrapper .loader-section { position: fixed; top: 0; width: 51%; height: 100%; background: rgb(243,210,171); /* background: #ededed; */ z-index: 1000; -moz-transform: translateX(0); -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } #loader-wrapper .loader-section.section-left { left: 0; -moz-animation: slideOutLeft 0.7s cubic-bezier(0.645, 0.045, 0.355, 1.000) 0.8s forwards; -webkit-animation: slideOutLeft 0.7s cubic-bezier(0.645, 0.045, 0.355, 1.000) 0.8s forwards; animation: slideOutLeft 0.7s cubic-bezier(0.645, 0.045, 0.355, 1.000) 0.8s forwards; } #loader-wrapper .loader-section.section-right { right: 0; -moz-animation: slideOutRight 0.7s cubic-bezier(0.645, 0.045, 0.355, 1.000) 0.8s forwards; -webkit-animation: slideOutRight 0.7s cubic-bezier(0.645, 0.045, 0.355, 1.000) 0.8s forwards; animation: slideOutRight 0.7s cubic-bezier(0.645, 0.045, 0.355, 1.000) 0.8s forwards; } #loader-wrapper .loader-logo { position: fixed; width: 192px; height: 192px; -moz-animation: fadeOut 0.3s ease-out 1.5s forwards; -webkit-animation: fadeOut 0.3s ease-out 1.5s forwards; animation: fadeOut 0.3s ease-out 1.5s forwards; z-index: 1001; } @keyframes slideOutLeft { 0% { -moz-transform: translateX(0); -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { visibility: hidden; -moz-transform: translateX(-100%); -webkit-transform: translateX(-100%); -ms-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes slideOutRight { 0% { -moz-transform: translateX(0); -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } 100% { visibility: hidden; -moz-transform: translateX(100%); -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes slideOutUp { 0% { -moz-transform: translateY(0); -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 100% { visibility: hidden; -moz-transform: translateY(-100%); -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } }