动画中的圆圈是如何扭曲的？

Question

使用这段代码，点会反弹，但我不知道如何进行转换来改变点的形状。

我在 https://lottiefiles.com/87015-loading 找到了这个设计，但我找不到提取CSS。它给了我一个 json 但我需要 CSS。

这是动画：

.dot-typing {
  position: relative;
  left: -9999px;
  width: 10px;
  height: 10px;
  border-radius: 5px;
  background-color: #9880ff;
  color: #9880ff;
  box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
  animation: dotTyping 1s infinite linear;
}

@keyframes dotTyping {
  0% {
    box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
  }
  16.667% {
    box-shadow: 9984px -10px 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
  }
  33.333% {
    box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
  }
  50% {
    box-shadow: 9984px 0 0 0 #9880ff, 9999px -10px 0 0 #9880ff, 10014px 0 0 0 #9880ff;
  }
  66.667% {
    box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
  }
  83.333% {
    box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px -10px 0 0 #9880ff;
  }
  100% {
    box-shadow: 9984px 0 0 0 #9880ff, 9999px 0 0 0 #9880ff, 10014px 0 0 0 #9880ff;
  }
}

<div class="snippet" data-title=".dot-elastic dot-typing">
  <div class="stage">
    <div class="dot-elastic dot-typing"></div>
  </div>
</div>

Answer 1

与您要求的动画相近的动画是我在

https://jsfiddle.net/e3uwb64a/202< /a>

HTML

<div class="container">
  <div class="ball">
    <span class="top" ></span>
    <span class="bottom" ></span>
  </div>
  <div class="ball">
    <span class="top"></span>
    <span class="bottom" ></span>
  </div>
  <div class="ball">
    <span class="top"></span>
    <span class="bottom" ></span>
  </div>
</div>

CSS

 @keyframes bounce{
  0%{
    transform: translateY(0px);
  }
  33.33%{
    transform: translateY(-30px);
  }
  66.66%{
    transform: translateY(30px);
  }

}

@keyframes eggItTop{
  0%{
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
  }
  33.33%{
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 00px;
  }
  66.66%{
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    border-bottom-left-radius: 00px;
    border-bottom-right-radius: 0px;
  }
}

@keyframes eggItBottom{
  0%{
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
  }
  33.33%{
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
  }
  66.66%{
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
  }
}



.container{
  display: flex;
  > div:nth-child(1){
    animation-delay: 0.2s;
    > span{
      animation-delay: 0.2s;
    }
  }
  > div:nth-child(2){
    animation-delay: 0.4s;
    > span{
      animation-delay: 0.4s;
    }
  }
  > div:nth-child(3){
    animation-delay: 0.6s;
    > span{
      animation-delay: 0.6s;
    }
  }
}

.ball{
  display: flex;
  flex-direction: column;
  margin: 30px;
  margin-top: 100px;
  animation: bounce 1s ease-out infinite;
  > span{
      width: 50px;
      height: 25px;
      background-color: #f05c1d;
      margin: 0px;
  }
}

.top{
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-left-radius: 0%;
  border-bottom-right-radius: 0%;
  animation: eggItTop 1s ease-out infinite;
  
}

.bottom{
  border-top-left-radius: 0%;
  border-top-right-radius: 0%;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  animation: eggItBottom 1s ease-out infinite;
  transform: translateY(-1px) /* just to hide a distubing line that show up on animation */
  
}

你可以尝试使用它来获得你想要的。