cube-transition.css 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263
  1. /*========================================================
  2. DARK LAYOUT
  3. =========================================================*/
  4. @-webkit-keyframes cube-transition {
  5. 25% {
  6. transform: translateX(50px) scale(0.5) rotate(-90deg);
  7. }
  8. 50% {
  9. transform: translate(50px, 50px) rotate(-180deg);
  10. }
  11. 75% {
  12. transform: translateY(50px) scale(0.5) rotate(-270deg);
  13. }
  14. 100% {
  15. transform: rotate(-360deg);
  16. }
  17. }
  18. @keyframes cube-transition {
  19. 25% {
  20. transform: translateX(50px) scale(0.5) rotate(-90deg);
  21. }
  22. 50% {
  23. transform: translate(50px, 50px) rotate(-180deg);
  24. }
  25. 75% {
  26. transform: translateY(50px) scale(0.5) rotate(-270deg);
  27. }
  28. 100% {
  29. transform: rotate(-360deg);
  30. }
  31. }
  32. .cube-transition {
  33. position: relative;
  34. transform: translate(-25px, -25px);
  35. }
  36. .cube-transition > div {
  37. -webkit-animation-fill-mode: both;
  38. animation-fill-mode: both;
  39. width: 10px;
  40. height: 10px;
  41. position: absolute;
  42. top: -5px;
  43. left: -5px;
  44. background-color: #b8c2cc;
  45. -webkit-animation: cube-transition 1.6s 0s infinite ease-in-out;
  46. animation: cube-transition 1.6s 0s infinite ease-in-out;
  47. }
  48. .cube-transition > div:last-child {
  49. -webkit-animation-delay: -0.8s;
  50. animation-delay: -0.8s;
  51. }