.preloader { animation: hideAnimation 0s ease-in 5s; animation-fill-mode: forwards; } .preloader figure { position: absolute; width: 0; height: 0; left: 50%; top: 50%; margin: -60px -50px; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 600; -moz-perspective: 600; perspective: 600; z-index: 9999; } .preloader figure span { display: block; position: absolute; -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; } .preloader figure span:after { display: block; content: ""; border-style: solid; border-color: transparent; border-width: 100px 58px 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .preloader figure span:nth-child(1) { -webkit-transform: rotate3d(0, 0, 1, 90deg); -moz-transform: rotate3d(0, 0, 1, 90deg); -ms-transform: rotate3d(0, 0, 1, 90deg); -o-transform: rotate3d(0, 0, 1, 90deg); transform: rotate3d(0, 0, 1, 90deg); } .preloader figure span:nth-child(1):after { border-top-color: #eaff00; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); -moz-transform: rotate3d(0.5, 1, 0, 180deg); -ms-transform: rotate3d(0.5, 1, 0, 180deg); -o-transform: rotate3d(0.5, 1, 0, 180deg); transform: rotate3d(0.5, 1, 0, 180deg); -webkit-animation: split 2s 0.1111111111s ease infinite; -moz-animation: split 2s 0.1111111111s ease infinite; animation: split 2s 0.1111111111s ease infinite; } .preloader figure span:nth-child(2) { -webkit-transform: rotate3d(0, 0, 1, 150deg); -moz-transform: rotate3d(0, 0, 1, 150deg); -ms-transform: rotate3d(0, 0, 1, 150deg); -o-transform: rotate3d(0, 0, 1, 150deg); transform: rotate3d(0, 0, 1, 150deg); } .preloader figure span:nth-child(2):after { border-top-color: #d5ff00; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); -moz-transform: rotate3d(0.5, 1, 0, 180deg); -ms-transform: rotate3d(0.5, 1, 0, 180deg); -o-transform: rotate3d(0.5, 1, 0, 180deg); transform: rotate3d(0.5, 1, 0, 180deg); -webkit-animation: split 2s 0.2222222222s ease infinite; -moz-animation: split 2s 0.2222222222s ease infinite; animation: split 2s 0.2222222222s ease infinite; } .preloader figure span:nth-child(3) { -webkit-transform: rotate3d(0, 0, 1, 210deg); -moz-transform: rotate3d(0, 0, 1, 210deg); -ms-transform: rotate3d(0, 0, 1, 210deg); -o-transform: rotate3d(0, 0, 1, 210deg); transform: rotate3d(0, 0, 1, 210deg); } .preloader figure span:nth-child(3):after { border-top-color: #bfff00; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); -moz-transform: rotate3d(0.5, 1, 0, 180deg); -ms-transform: rotate3d(0.5, 1, 0, 180deg); -o-transform: rotate3d(0.5, 1, 0, 180deg); transform: rotate3d(0.5, 1, 0, 180deg); -webkit-animation: split 2s 0.3333333333s ease infinite; -moz-animation: split 2s 0.3333333333s ease infinite; animation: split 2s 0.3333333333s ease infinite; } .preloader figure span:nth-child(4) { -webkit-transform: rotate3d(0, 0, 1, 270deg); -moz-transform: rotate3d(0, 0, 1, 270deg); -ms-transform: rotate3d(0, 0, 1, 270deg); -o-transform: rotate3d(0, 0, 1, 270deg); transform: rotate3d(0, 0, 1, 270deg); } .preloader figure span:nth-child(4):after { border-top-color: #aaff00; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); -moz-transform: rotate3d(0.5, 1, 0, 180deg); -ms-transform: rotate3d(0.5, 1, 0, 180deg); -o-transform: rotate3d(0.5, 1, 0, 180deg); transform: rotate3d(0.5, 1, 0, 180deg); -webkit-animation: split 2s 0.4444444444s ease infinite; -moz-animation: split 2s 0.4444444444s ease infinite; animation: split 2s 0.4444444444s ease infinite; } .preloader figure span:nth-child(5) { -webkit-transform: rotate3d(0, 0, 1, 330deg); -moz-transform: rotate3d(0, 0, 1, 330deg); -ms-transform: rotate3d(0, 0, 1, 330deg); -o-transform: rotate3d(0, 0, 1, 330deg); transform: rotate3d(0, 0, 1, 330deg); } .preloader figure span:nth-child(5):after { border-top-color: #95ff00; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); -moz-transform: rotate3d(0.5, 1, 0, 180deg); -ms-transform: rotate3d(0.5, 1, 0, 180deg); -o-transform: rotate3d(0.5, 1, 0, 180deg); transform: rotate3d(0.5, 1, 0, 180deg); -webkit-animation: split 2s 0.5555555556s ease infinite; -moz-animation: split 2s 0.5555555556s ease infinite; animation: split 2s 0.5555555556s ease infinite; } .preloader figure span:nth-child(6) { -webkit-transform: rotate3d(0, 0, 1, 390deg); -moz-transform: rotate3d(0, 0, 1, 390deg); -ms-transform: rotate3d(0, 0, 1, 390deg); -o-transform: rotate3d(0, 0, 1, 390deg); transform: rotate3d(0, 0, 1, 390deg); } .preloader figure span:nth-child(6):after { border-top-color: #80ff00; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); -moz-transform: rotate3d(0.5, 1, 0, 180deg); -ms-transform: rotate3d(0.5, 1, 0, 180deg); -o-transform: rotate3d(0.5, 1, 0, 180deg); transform: rotate3d(0.5, 1, 0, 180deg); -webkit-animation: split 2s 0.6666666667s ease infinite; -moz-animation: split 2s 0.6666666667s ease infinite; animation: split 2s 0.6666666667s ease infinite; } @-webkit-keyframes split { 0% { -webkit-transform-origin: 50% 100%; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); } 25% { -webkit-transform-origin: 50% 100%; -webkit-transform: rotate3d(0, 1, 0, 360deg); } 50% { opacity: 1; -webkit-transform-origin: 100% 0%; -webkit-transform: rotate3d(0, 1, 0, 360deg); } 75% { opacity: 0; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); } 100% { opacity: 1; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); } } @-moz-keyframes split { 0% { -moz-transform-origin: 50% 100%; -moz-transform: rotate3d(0.5, 1, 0, 180deg); } 25% { -moz-transform-origin: 50% 100%; -moz-transform: rotate3d(0, 1, 0, 360deg); } 50% { opacity: 1; -moz-transform-origin: 100% 0%; -moz-transform: rotate3d(0, 1, 0, 360deg); } 75% { opacity: 0; -moz-transform: rotate3d(0.5, 1, 0, 180deg); } 100% { opacity: 1; -moz-transform: rotate3d(0.5, 1, 0, 180deg); } } @keyframes split { 0% { -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); -moz-transform: rotate3d(0.5, 1, 0, 180deg); -ms-transform: rotate3d(0.5, 1, 0, 180deg); -o-transform: rotate3d(0.5, 1, 0, 180deg); transform: rotate3d(0.5, 1, 0, 180deg); } 25% { -webkit-transform-origin: 50% 100%; -moz-transform-origin: 50% 100%; -ms-transform-origin: 50% 100%; -o-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transform: rotate3d(0, 1, 0, 360deg); -moz-transform: rotate3d(0, 1, 0, 360deg); -ms-transform: rotate3d(0, 1, 0, 360deg); -o-transform: rotate3d(0, 1, 0, 360deg); transform: rotate3d(0, 1, 0, 360deg); } 50% { opacity: 1; -webkit-transform-origin: 100% 0%; -moz-transform-origin: 100% 0%; -ms-transform-origin: 100% 0%; -o-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-transform: rotate3d(0, 1, 0, 360deg); -moz-transform: rotate3d(0, 1, 0, 360deg); -ms-transform: rotate3d(0, 1, 0, 360deg); -o-transform: rotate3d(0, 1, 0, 360deg); transform: rotate3d(0, 1, 0, 360deg); } 75% { opacity: 0; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); -moz-transform: rotate3d(0.5, 1, 0, 180deg); -ms-transform: rotate3d(0.5, 1, 0, 180deg); -o-transform: rotate3d(0.5, 1, 0, 180deg); transform: rotate3d(0.5, 1, 0, 180deg); } 100% { opacity: 1; -webkit-transform: rotate3d(0.5, 1, 0, 180deg); -moz-transform: rotate3d(0.5, 1, 0, 180deg); -ms-transform: rotate3d(0.5, 1, 0, 180deg); -o-transform: rotate3d(0.5, 1, 0, 180deg); transform: rotate3d(0.5, 1, 0, 180deg); } }