shineout/css/Spin/styles/three-bounce.css

Shein 前端组件库

.so-three-bounce {
  margin: auto;
  text-align: center;
}
@-webkit-keyframes so-three-bounce-bounce {
  0%,
  80%,
  100% {
    -webkit-transform: scale3d(0, 0, 1);
            transform: scale3d(0, 0, 1);
  }
  40% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes so-three-bounce-bounce {
  0%,
  80%,
  100% {
    -webkit-transform: scale3d(0, 0, 1);
            transform: scale3d(0, 0, 1);
  }
  40% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
.so-three-bounce-item {
  display: inline-block;
  -webkit-animation: so-three-bounce-bounce 1.4s ease-in-out 0s infinite both;
          animation: so-three-bounce-bounce 1.4s ease-in-out 0s infinite both;
}
.so-three-bounce-item div {
  border-radius: 100%;
}
.so-three-bounce-item:nth-child(1) {
  -webkit-animation-delay: -0.32s;
          animation-delay: -0.32s;
}
.so-three-bounce-item:nth-child(2) {
  -webkit-animation-delay: -0.16s;
          animation-delay: -0.16s;
}