triangle-skew-spin.css 3.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091
  1. @-webkit-keyframes triangle-skew-spin {
  2. 25% {
  3. -webkit-transform : perspective(100px) rotateX(180deg) rotateY(0);
  4. transform : perspective(100px) rotateX(180deg) rotateY(0);
  5. }
  6. 50% {
  7. -webkit-transform : perspective(100px) rotateX(180deg) rotateY(180deg);
  8. transform : perspective(100px) rotateX(180deg) rotateY(180deg);
  9. }
  10. 75% {
  11. -webkit-transform : perspective(100px) rotateX(0) rotateY(180deg);
  12. transform : perspective(100px) rotateX(0) rotateY(180deg);
  13. }
  14. 100% {
  15. -webkit-transform : perspective(100px) rotateX(0) rotateY(0);
  16. transform : perspective(100px) rotateX(0) rotateY(0);
  17. }
  18. }
  19. @-moz-keyframes triangle-skew-spin {
  20. 25% {
  21. -moz-transform : perspective(100px) rotateX(180deg) rotateY(0);
  22. transform : perspective(100px) rotateX(180deg) rotateY(0);
  23. }
  24. 50% {
  25. -moz-transform : perspective(100px) rotateX(180deg) rotateY(180deg);
  26. transform : perspective(100px) rotateX(180deg) rotateY(180deg);
  27. }
  28. 75% {
  29. -moz-transform : perspective(100px) rotateX(0) rotateY(180deg);
  30. transform : perspective(100px) rotateX(0) rotateY(180deg);
  31. }
  32. 100% {
  33. -moz-transform : perspective(100px) rotateX(0) rotateY(0);
  34. transform : perspective(100px) rotateX(0) rotateY(0);
  35. }
  36. }
  37. @-o-keyframes triangle-skew-spin {
  38. 25% {
  39. transform : perspective(100px) rotateX(180deg) rotateY(0);
  40. }
  41. 50% {
  42. transform : perspective(100px) rotateX(180deg) rotateY(180deg);
  43. }
  44. 75% {
  45. transform : perspective(100px) rotateX(0) rotateY(180deg);
  46. }
  47. 100% {
  48. transform : perspective(100px) rotateX(0) rotateY(0);
  49. }
  50. }
  51. @keyframes triangle-skew-spin {
  52. 25% {
  53. -webkit-transform : perspective(100px) rotateX(180deg) rotateY(0);
  54. -moz-transform : perspective(100px) rotateX(180deg) rotateY(0);
  55. transform : perspective(100px) rotateX(180deg) rotateY(0);
  56. }
  57. 50% {
  58. -webkit-transform : perspective(100px) rotateX(180deg) rotateY(180deg);
  59. -moz-transform : perspective(100px) rotateX(180deg) rotateY(180deg);
  60. transform : perspective(100px) rotateX(180deg) rotateY(180deg);
  61. }
  62. 75% {
  63. -webkit-transform : perspective(100px) rotateX(0) rotateY(180deg);
  64. -moz-transform : perspective(100px) rotateX(0) rotateY(180deg);
  65. transform : perspective(100px) rotateX(0) rotateY(180deg);
  66. }
  67. 100% {
  68. -webkit-transform : perspective(100px) rotateX(0) rotateY(0);
  69. -moz-transform : perspective(100px) rotateX(0) rotateY(0);
  70. transform : perspective(100px) rotateX(0) rotateY(0);
  71. }
  72. }
  73. .triangle-skew-spin > div {
  74. -webkit-animation-fill-mode : both;
  75. -moz-animation-fill-mode : both;
  76. -o-animation-fill-mode : both;
  77. animation-fill-mode : both;
  78. width : 0;
  79. height : 0;
  80. border-right : 20px solid transparent;
  81. border-left : 20px solid transparent;
  82. border-bottom : 20px solid #55595C;
  83. -webkit-animation : triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  84. -moz-animation : triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  85. -o-animation : triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  86. animation : triangle-skew-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
  87. }