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

Posted 2023-03-06

【中文标题】如何做这个 CSS 动画？ （定时功能）

【英文标题】：How to do this CSS animation? (timing-function)

【发布时间】：2019-08-27 07:22:57

【问题描述】：

我想要这样的动画：

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

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

---

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

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

【问题讨论】：

这在 CSS 动画中是不可能的，立方体贝塞尔曲线仅用于动画的缓动，不适用于动画。我将使用带有笔画偏移的 SVG 来完成。

css-tricks.com/svg-line-animation-works

@GiuMagnani 哦，真的吗？ :( 我应该使用 SVG。谢谢。

【参考方案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>