ball-pulse-rise.css 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. @keyframes ball-pulse-rise-even {
  2. 0% {
  3. transform: scale(1.1); }
  4. 25% {
  5. transform: translateY(-30px); }
  6. 50% {
  7. transform: scale(0.4); }
  8. 75% {
  9. transform: translateY(30px); }
  10. 100% {
  11. transform: translateY(0);
  12. transform: scale(1); } }
  13. @keyframes ball-pulse-rise-odd {
  14. 0% {
  15. transform: scale(0.4); }
  16. 25% {
  17. transform: translateY(30px); }
  18. 50% {
  19. transform: scale(1.1); }
  20. 75% {
  21. transform: translateY(-30px); }
  22. 100% {
  23. transform: translateY(0);
  24. transform: scale(0.75); } }
  25. .ball-pulse-rise > div {
  26. background-color: #55595c;
  27. width: 15px;
  28. height: 15px;
  29. border-radius: 100%;
  30. margin: 2px;
  31. animation-fill-mode: both;
  32. display: inline-block;
  33. animation-duration: 1s;
  34. animation-timing-function: cubic-bezier(0.15, 0.46, 0.9, 0.6);
  35. animation-iteration-count: infinite;
  36. animation-delay: 0; }
  37. .ball-pulse-rise > div:nth-child(2n) {
  38. animation-name: ball-pulse-rise-even; }
  39. .ball-pulse-rise > div:nth-child(2n-1) {
  40. animation-name: ball-pulse-rise-odd; }