如何做这个 CSS 动画？（定时功能）答案

【问题标题】：How to do this CSS animation? (timing-function)如何做这个 CSS 动画？（定时功能）
【发布时间】：2019-08-27 07:22:57
【问题描述】：

我想要这样的动画：

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

我尝试用cubic-bezier制作，但没有用..

我对css动画了解不多，但是cubic-bezier可以加点除了第一个和最后一个吗？
在我看来，我觉得我应该加分..

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

【问题讨论】：

这在 CSS 动画中是不可能的，立方体贝塞尔曲线仅用于动画的缓动，不适用于动画。我将使用带有笔画偏移的 SVG 来完成。
css-tricks.com/svg-line-animation-works
@GiuMagnani 哦，真的吗？ :( 我应该使用 SVG。谢谢。

标签： css css-selectors css-transitions css-animations

【解决方案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>

【讨论】：