ball-pulse.css 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. /*========================================================
  2. DARK LAYOUT
  3. =========================================================*/
  4. @-webkit-keyframes scale {
  5. 0% {
  6. transform: scale(1);
  7. opacity: 1;
  8. }
  9. 45% {
  10. transform: scale(0.1);
  11. opacity: 0.7;
  12. }
  13. 80% {
  14. transform: scale(1);
  15. opacity: 1;
  16. }
  17. }
  18. @keyframes scale {
  19. 0% {
  20. transform: scale(1);
  21. opacity: 1;
  22. }
  23. 45% {
  24. transform: scale(0.1);
  25. opacity: 0.7;
  26. }
  27. 80% {
  28. transform: scale(1);
  29. opacity: 1;
  30. }
  31. }
  32. .ball-pulse > div:nth-child(1) {
  33. -webkit-animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  34. animation: scale 0.75s -0.24s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  35. }
  36. .ball-pulse > div:nth-child(2) {
  37. -webkit-animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  38. animation: scale 0.75s -0.12s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  39. }
  40. .ball-pulse > div:nth-child(3) {
  41. -webkit-animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  42. animation: scale 0.75s 0s infinite cubic-bezier(0.2, 0.68, 0.18, 1.08);
  43. }
  44. .ball-pulse > div {
  45. background-color: #b8c2cc;
  46. width: 15px;
  47. height: 15px;
  48. border-radius: 100%;
  49. margin: 2px;
  50. -webkit-animation-fill-mode: both;
  51. animation-fill-mode: both;
  52. display: inline-block;
  53. }