ball-scale-multiple.css 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768
  1. /*========================================================
  2. DARK LAYOUT
  3. =========================================================*/
  4. @-webkit-keyframes ball-scale-multiple {
  5. 0% {
  6. transform: scale(0);
  7. opacity: 0;
  8. }
  9. 5% {
  10. opacity: 1;
  11. }
  12. 100% {
  13. transform: scale(1);
  14. opacity: 0;
  15. }
  16. }
  17. @keyframes ball-scale-multiple {
  18. 0% {
  19. transform: scale(0);
  20. opacity: 0;
  21. }
  22. 5% {
  23. opacity: 1;
  24. }
  25. 100% {
  26. transform: scale(1);
  27. opacity: 0;
  28. }
  29. }
  30. .ball-scale-multiple {
  31. position: relative;
  32. }
  33. .ball-scale-multiple > div:nth-child(2) {
  34. -webkit-animation-delay: -0.4s;
  35. animation-delay: -0.4s;
  36. }
  37. .ball-scale-multiple > div:nth-child(3) {
  38. -webkit-animation-delay: -0.2s;
  39. animation-delay: -0.2s;
  40. }
  41. .ball-scale-multiple > div {
  42. background-color: #b8c2cc;
  43. width: 15px;
  44. height: 15px;
  45. border-radius: 100%;
  46. margin: 2px;
  47. -webkit-animation-fill-mode: both;
  48. animation-fill-mode: both;
  49. position: absolute;
  50. top: 0px;
  51. opacity: 0;
  52. margin: 0;
  53. width: 60px;
  54. height: 60px;
  55. -webkit-animation: ball-scale-multiple 1s 0s linear infinite;
  56. animation: ball-scale-multiple 1s 0s linear infinite;
  57. }