css - 如何做这个CSS动画？ (计时功能)

Question

我想要这样的动画:

(下面的蓝线是运动的图像。哈哈)

我试着用 cubic-bezier 做，但没成功..

---

我对css动画不是很了解，但是cubic-bezier除了first和last之外还能加点吗？
在我看来，我觉得我应该加分..

问。像这样的css动画应该用什么样的曲线？

Answer 1

That's not possible with CSS animation -Gui Magnani

如果您手动设置动画时间和关键帧，您可以接近您的绘图。

.container {
  position: relative;
  height: 90vh;
}

.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  width: 15px;
  height: 15px;
  box-shadow: 0px 0px 0px 5px green;
  animation: pulse 2s linear infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0px 0px 0px 10px green;
    width: 1px;
    height: 1px;
  }
  20% {
    box-shadow: 0px 0px 0px 100px green;
    width: 1px;
    height: 1px;
  }
  30% {
    box-shadow: 0px 0px 0px 90px green;
    width: 1px;
    height: 1px;
  }
  90% {
    box-shadow: 0px 0px 0px 10px green;
    width: 300px;
    height: 300px;
  }
  95% {
    box-shadow: 0px 0px 0px 0px green;
    width: 300px;
    height: 300px;
  }
  100% {
    box-shadow: 0px 0px 0px 0px green;
    width: 290px;
    height: 290px;
  }
}

<div class="container">
  <div class="circle"></div>
</div>