CSS 动画变慢 down/do 在向页面添加更多部分后未完成

Question

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

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

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

<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

Answer 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>

CSS 动画变慢 down/do 在向页面添加更多部分后未完成

CSS animation slowed down/do not complete after adding more sections to page

html

css

webflow