如何制作CSS动画？ （定时功能）

Question

我想要这样的动画：

（下面的蓝线是运动的图像。哈哈）

我试图用三次贝塞尔曲线制作，但是没有用..

---

我对CSS动画了解不多，但是三次贝塞尔曲线可以添加除第一个和最后一个点以外的点？
我认为我应该增加点数。

Q 。这样的css动画应该使用哪种曲线？

Answer 1

  

CSS动画-Gui Magnani无法实现

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

//The incorrect code:

byte[] array = new byte[in.available()];
in.read(array);

.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;
  }
}