ball-zig-zag.css 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. /*========================================================
  2. DARK LAYOUT
  3. =========================================================*/
  4. @-webkit-keyframes ball-zig {
  5. 33% {
  6. transform: translate(-15px, -30px);
  7. }
  8. 66% {
  9. transform: translate(15px, -30px);
  10. }
  11. 100% {
  12. transform: translate(0, 0);
  13. }
  14. }
  15. @keyframes ball-zig {
  16. 33% {
  17. transform: translate(-15px, -30px);
  18. }
  19. 66% {
  20. transform: translate(15px, -30px);
  21. }
  22. 100% {
  23. transform: translate(0, 0);
  24. }
  25. }
  26. @-webkit-keyframes ball-zag {
  27. 33% {
  28. transform: translate(15px, 30px);
  29. }
  30. 66% {
  31. transform: translate(-15px, 30px);
  32. }
  33. 100% {
  34. transform: translate(0, 0);
  35. }
  36. }
  37. @keyframes ball-zag {
  38. 33% {
  39. transform: translate(15px, 30px);
  40. }
  41. 66% {
  42. transform: translate(-15px, 30px);
  43. }
  44. 100% {
  45. transform: translate(0, 0);
  46. }
  47. }
  48. .ball-zig-zag {
  49. position: relative;
  50. transform: translate(-15px, -15px);
  51. }
  52. .ball-zig-zag > div {
  53. background-color: #b8c2cc;
  54. width: 15px;
  55. height: 15px;
  56. border-radius: 100%;
  57. margin: 2px;
  58. -webkit-animation-fill-mode: both;
  59. animation-fill-mode: both;
  60. position: absolute;
  61. margin-left: 15px;
  62. top: 4px;
  63. left: -7px;
  64. }
  65. .ball-zig-zag > div:first-child {
  66. -webkit-animation: ball-zig 0.7s 0s infinite linear;
  67. animation: ball-zig 0.7s 0s infinite linear;
  68. }
  69. .ball-zig-zag > div:last-child {
  70. -webkit-animation: ball-zag 0.7s 0s infinite linear;
  71. animation: ball-zag 0.7s 0s infinite linear;
  72. }