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

Question

I am having trouble with CSS animations I added to a Webflow site in an Embed element. Before I added more sections to the page, the animations played a lot faster and the animation fully completed. Now after working on the site and adding more sections, the animations are slow and some do not complete.

Here is the embedded code I am using, if anyone could tell me why this is happening I would greatly appreciate the help :)

I am guessing the code is targeting the body? And that is why the animations got messed up when adding more sections?

<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

What you are looking for is animation speed. Try this:

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