square-spin.css 500 B

12345678910111213141516
  1. @keyframes square-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. .square-spin > div {
  11. animation-fill-mode: both;
  12. width: 50px;
  13. height: 50px;
  14. background: #55595c;
  15. animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite; }