ball-pulse-rise.css 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125
  1. /*========================================================
  2. DARK LAYOUT
  3. =========================================================*/
  4. @-webkit-keyframes ball-pulse-rise-even {
  5. 0% {
  6. transform: scale(1.1);
  7. }
  8. 25% {
  9. transform: translateY(-30px);
  10. }
  11. 50% {
  12. transform: scale(0.4);
  13. }
  14. 75% {
  15. transform: translateY(30px);
  16. }
  17. 100% {
  18. transform: translateY(0);
  19. transform: scale(1);
  20. }
  21. }
  22. @keyframes ball-pulse-rise-even {
  23. 0% {
  24. transform: scale(1.1);
  25. }
  26. 25% {
  27. transform: translateY(-30px);
  28. }
  29. 50% {
  30. transform: scale(0.4);
  31. }
  32. 75% {
  33. transform: translateY(30px);
  34. }
  35. 100% {
  36. transform: translateY(0);
  37. transform: scale(1);
  38. }
  39. }
  40. @-webkit-keyframes ball-pulse-rise-odd {
  41. 0% {
  42. transform: scale(0.4);
  43. }
  44. 25% {
  45. transform: translateY(30px);
  46. }
  47. 50% {
  48. transform: scale(1.1);
  49. }
  50. 75% {
  51. transform: translateY(-30px);
  52. }
  53. 100% {
  54. transform: translateY(0);
  55. transform: scale(0.75);
  56. }
  57. }
  58. @keyframes ball-pulse-rise-odd {
  59. 0% {
  60. transform: scale(0.4);
  61. }
  62. 25% {
  63. transform: translateY(30px);
  64. }
  65. 50% {
  66. transform: scale(1.1);
  67. }
  68. 75% {
  69. transform: translateY(-30px);
  70. }
  71. 100% {
  72. transform: translateY(0);
  73. transform: scale(0.75);
  74. }
  75. }
  76. .ball-pulse-rise > div {
  77. background-color: #b8c2cc;
  78. width: 15px;
  79. height: 15px;
  80. border-radius: 100%;
  81. margin: 2px;
  82. -webkit-animation-fill-mode: both;
  83. animation-fill-mode: both;
  84. display: inline-block;
  85. -webkit-animation-duration: 1s;
  86. animation-duration: 1s;
  87. -webkit-animation-timing-function: cubic-bezier(0.15, 0.46, 0.9, 0.6);
  88. animation-timing-function: cubic-bezier(0.15, 0.46, 0.9, 0.6);
  89. -webkit-animation-iteration-count: infinite;
  90. animation-iteration-count: infinite;
  91. -webkit-animation-delay: 0;
  92. animation-delay: 0;
  93. }
  94. .ball-pulse-rise > div:nth-child(2n) {
  95. -webkit-animation-name: ball-pulse-rise-even;
  96. animation-name: ball-pulse-rise-even;
  97. }
  98. .ball-pulse-rise > div:nth-child(2n-1) {
  99. -webkit-animation-name: ball-pulse-rise-odd;
  100. animation-name: ball-pulse-rise-odd;
  101. }