向页面添加更多部分后，CSS 动画变慢/未完成答案

【问题标题】：CSS animation slowed down/do not complete after adding more sections to page向页面添加更多部分后，CSS 动画变慢/未完成
【发布时间】：2021-03-11 05:03:02
【问题描述】：

我在嵌入元素中添加到 Webflow 网站的 CSS 动画时遇到问题。在我向页面添加更多部分之前，动画播放得更快并且动画完全完成。现在在网站上工作并添加更多部分后，动画很慢，有些没有完成。

这是我正在使用的嵌入式代码，如果有人能告诉我为什么会这样，我将不胜感激：)

我猜代码是针对身体的？这就是为什么添加更多部分时动画会变得混乱的原因？

<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" style="height:64px;width:64px">
  <path fill="none" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" d="M18 1h28v61L32 48 18 62z" stroke-dasharray="190,192"/>
  <path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" d="M23 22l7 7 13-13" stroke-dasharray="29,31"/>
</svg>
<style>

selector {
  property: value;
}

svg {
  height: 100%;
  width: 100%;
}

path {
  stroke-dasharray: 300
   ;
  animation: draw 2s normal;
}

@keyframes draw {
  from {
    stroke-dashoffset: 300
  }
  to {
    stroke-dashoffset: 100%;
  }
}
</style>

https://rova-roofing.webflow.io

icon animation section

【问题讨论】：

您缺少分号 (;) after stroke-dashoffset: 300。还有 300 个，您需要将其设为百分比或长度。例如，px、em 或 rem。

标签： html css webflow

【解决方案1】：

您正在寻找的是动画速度。试试这个：

<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" style="height:64px;width:64px">
  <path fill="none" stroke="currentColor" stroke-width="2" stroke-miterlimit="10" d="M18 1h28v61L32 48 18 62z" stroke-dasharray="190,192"/>
  <path fill="none" stroke="currentColor" stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" d="M23 22l7 7 13-13" stroke-dasharray="29,31"/>
</svg>
<style>
svg {
  height: 100%;
  width: 100%;
}

path {
  stroke-dasharray: 300px;
   ;
  animation: draw 5s normal; /*Change the speed right here*/
}

@keyframes draw {
  from {
    stroke-dashoffset: 300px;
  }
  to {
    stroke-dashoffset: 100%;
  }
}
</style>

【讨论】：

我尝试添加代码，但没有任何改变。在 codepen 中它运行完美，我想它与 Webflow 有关：codepen.io/kuchtaaa/pen/BaLyREE
感谢您的回复。我在下面的部分中针对另一个动画，它具有相同的类，导致动画发生变化。现在修好了！ :)
@christopherkuchta，我很高兴它有效。如果我的答案是您的解决方案，请考虑投票和/或选择我的答案。谢谢。