triangle-skew-spin.css 608 B

123456789101112131415161718
  1. @keyframes triangle-skew-spin {
  2. 25% {
  3. transform: perspective(100px) rotateX(180deg) rotateY(0); }
  4. 50% {
  5. transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
  6. 75% {
  7. transform: perspective(100px) rotateX(0) rotateY(180deg); }
  8. 100% {
  9. transform: perspective(100px) rotateX(0) rotateY(0); } }
  10. .triangle-skew-spin > div {
  11. animation-fill-mode: both;
  12. width: 0;
  13. height: 0;
  14. border-left: 20px solid transparent;
  15. border-right: 20px solid transparent;
  16. border-bottom: 20px solid #55595c;
  17. animation: triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; }