怎么做这个CSS动画？ （定时功能）

Question

我想要一个像这样的动画：

（下面的蓝线是移动的图像。大声笑）

我尝试用cubic-bezier制作，但它不起作用..

---

我不太了解css动画，但是cubic-bezier可以添加除了第一个和最后一个之外的点吗？ 在我看来，我觉得我应该增加分数..

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

Answer 1

CSS动画不可能--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>