ball-zig-zag-deflect.css 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. @keyframes ball-zig-deflect {
  2. 17% {
  3. transform: translate(-15px, -30px); }
  4. 34% {
  5. transform: translate(15px, -30px); }
  6. 50% {
  7. transform: translate(0, 0); }
  8. 67% {
  9. transform: translate(15px, -30px); }
  10. 84% {
  11. transform: translate(-15px, -30px); }
  12. 100% {
  13. transform: translate(0, 0); } }
  14. @keyframes ball-zag-deflect {
  15. 17% {
  16. transform: translate(15px, 30px); }
  17. 34% {
  18. transform: translate(-15px, 30px); }
  19. 50% {
  20. transform: translate(0, 0); }
  21. 67% {
  22. transform: translate(-15px, 30px); }
  23. 84% {
  24. transform: translate(15px, 30px); }
  25. 100% {
  26. transform: translate(0, 0); } }
  27. .ball-zig-zag-deflect {
  28. position: relative;
  29. transform: translate(-15px, -15px); }
  30. .ball-zig-zag-deflect > div {
  31. background-color: #55595c;
  32. width: 15px;
  33. height: 15px;
  34. border-radius: 100%;
  35. margin: 2px;
  36. animation-fill-mode: both;
  37. position: absolute;
  38. margin-left: 15px;
  39. top: 4px;
  40. left: -7px; }
  41. .ball-zig-zag-deflect > div:first-child {
  42. animation: ball-zig-deflect 1.5s 0s infinite linear; }
  43. .ball-zig-zag-deflect > div:last-child {
  44. animation: ball-zag-deflect 1.5s 0s infinite linear; }