cube-transition.css 673 B

123456789101112131415161718192021222324
  1. @keyframes cube-transition {
  2. 25% {
  3. transform: translateX(50px) scale(0.5) rotate(-90deg); }
  4. 50% {
  5. transform: translate(50px, 50px) rotate(-180deg); }
  6. 75% {
  7. transform: translateY(50px) scale(0.5) rotate(-270deg); }
  8. 100% {
  9. transform: rotate(-360deg); } }
  10. .cube-transition {
  11. position: relative;
  12. transform: translate(-25px, -25px); }
  13. .cube-transition > div {
  14. animation-fill-mode: both;
  15. width: 10px;
  16. height: 10px;
  17. position: absolute;
  18. top: -5px;
  19. left: -5px;
  20. background-color: #55595c;
  21. animation: cube-transition 1.6s 0s infinite ease-in-out; }
  22. .cube-transition > div:last-child {
  23. animation-delay: -0.8s; }