ball-pulse-sync.css 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. /*========================================================
  2. DARK LAYOUT
  3. =========================================================*/
  4. @-webkit-keyframes ball-pulse-sync {
  5. 33% {
  6. transform: translateY(10px);
  7. }
  8. 66% {
  9. transform: translateY(-10px);
  10. }
  11. 100% {
  12. transform: translateY(0);
  13. }
  14. }
  15. @keyframes ball-pulse-sync {
  16. 33% {
  17. transform: translateY(10px);
  18. }
  19. 66% {
  20. transform: translateY(-10px);
  21. }
  22. 100% {
  23. transform: translateY(0);
  24. }
  25. }
  26. .ball-pulse-sync > div:nth-child(1) {
  27. -webkit-animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out;
  28. animation: ball-pulse-sync 0.6s -0.14s infinite ease-in-out;
  29. }
  30. .ball-pulse-sync > div:nth-child(2) {
  31. -webkit-animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out;
  32. animation: ball-pulse-sync 0.6s -0.07s infinite ease-in-out;
  33. }
  34. .ball-pulse-sync > div:nth-child(3) {
  35. -webkit-animation: ball-pulse-sync 0.6s 0s infinite ease-in-out;
  36. animation: ball-pulse-sync 0.6s 0s infinite ease-in-out;
  37. }
  38. .ball-pulse-sync > div {
  39. background-color: #b8c2cc;
  40. width: 15px;
  41. height: 15px;
  42. border-radius: 100%;
  43. margin: 2px;
  44. -webkit-animation-fill-mode: both;
  45. animation-fill-mode: both;
  46. display: inline-block;
  47. }