@-webkit-keyframes triangle-skew-spin { 25% { -webkit-transform : perspective(100px) rotateX(180deg) rotateY(0); transform : perspective(100px) rotateX(180deg) rotateY(0); } 50% { -webkit-transform : perspective(100px) rotateX(180deg) rotateY(180deg); transform : perspective(100px) rotateX(180deg) rotateY(180deg); } 75% { -webkit-transform : perspective(100px) rotateX(0) rotateY(180deg); transform : perspective(100px) rotateX(0) rotateY(180deg); } 100% { -webkit-transform : perspective(100px) rotateX(0) rotateY(0); transform : perspective(100px) rotateX(0) rotateY(0); } } @-moz-keyframes triangle-skew-spin { 25% { -moz-transform : perspective(100px) rotateX(180deg) rotateY(0); transform : perspective(100px) rotateX(180deg) rotateY(0); } 50% { -moz-transform : perspective(100px) rotateX(180deg) rotateY(180deg); transform : perspective(100px) rotateX(180deg) rotateY(180deg); } 75% { -moz-transform : perspective(100px) rotateX(0) rotateY(180deg); transform : perspective(100px) rotateX(0) rotateY(180deg); } 100% { -moz-transform : perspective(100px) rotateX(0) rotateY(0); transform : perspective(100px) rotateX(0) rotateY(0); } } @-o-keyframes triangle-skew-spin { 25% { transform : perspective(100px) rotateX(180deg) rotateY(0); } 50% { transform : perspective(100px) rotateX(180deg) rotateY(180deg); } 75% { transform : perspective(100px) rotateX(0) rotateY(180deg); } 100% { transform : perspective(100px) rotateX(0) rotateY(0); } } @keyframes triangle-skew-spin { 25% { -webkit-transform : perspective(100px) rotateX(180deg) rotateY(0); -moz-transform : perspective(100px) rotateX(180deg) rotateY(0); transform : perspective(100px) rotateX(180deg) rotateY(0); } 50% { -webkit-transform : perspective(100px) rotateX(180deg) rotateY(180deg); -moz-transform : perspective(100px) rotateX(180deg) rotateY(180deg); transform : perspective(100px) rotateX(180deg) rotateY(180deg); } 75% { -webkit-transform : perspective(100px) rotateX(0) rotateY(180deg); -moz-transform : perspective(100px) rotateX(0) rotateY(180deg); transform : perspective(100px) rotateX(0) rotateY(180deg); } 100% { -webkit-transform : perspective(100px) rotateX(0) rotateY(0); -moz-transform : perspective(100px) rotateX(0) rotateY(0); transform : perspective(100px) rotateX(0) rotateY(0); } } .triangle-skew-spin > div { -webkit-animation-fill-mode : both; -moz-animation-fill-mode : both; -o-animation-fill-mode : both; animation-fill-mode : both; width : 0; height : 0; border-right : 20px solid transparent; border-left : 20px solid transparent; border-bottom : 20px solid #55595C; -webkit-animation : triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; -moz-animation : triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; -o-animation : triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; animation : triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; }