ball-scale-random.css 1.6 KB

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