时间戳

首页 > 解决方案 > 向页面添加更多部分后，CSS 动画变慢/未完成

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

问题描述

我在嵌入元素中添加到 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

图标动画部分

标签： htmlcsswebflow

解决方案

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

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

推荐阅读