Question

我有一个正在用CSS制作动画的SVG徽标。它应该在页面加载后立即进行动画处理，但是似乎要延迟3秒。该页面仅包含导航，SVG和下面的一些文本。我正在使用Materialize进行格式化。

我尝试添加负数和0s动画延迟，并尝试使用供应商前缀。

HTML中的SVG

<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 50 50">
        <defs>
         <style>
            .st0 {
              fill: #c09e56
            }
          </style>
          <g id="lines">
           <path id="a" class="st0" fill="#c09e56" d="M13.45 14.21l.1 15.79 1-.01-.1-16.29z" />
           <path id="b" class="st0" fill="#c09e56" d="M16.37 12.72V27.5h1V12.21z" />
           <path id="c" class="st0" fill="#c09e56" d="M13.53 29.75l.02 1.12.11.13L36.5 11.79v-1.35z" />
           <path id="d" class="st0" fill="#c09e56" d="M13.6 33.68l.02 1.27.04.05L36.5 15.56V14.2z" />
            <path id="e" class="st0" fill="#c09e56" d="M21.18 23.68l-.6.8L36.5 36.5v-1.25z" />
            <path id="f" class="st0" fill="#c09e56" d="M21.59 27l-.59.8 15.5 12.12v-1.27z" />
          </g>
       </defs>
        <use xlink:href="#lines" fill-opacity="0" stroke="#c09e56" />
      </svg>

CSS

svg{
  overflow:visible;
  fill: #C09E56;
  stroke: transparent;
  stroke-width: 0;
  width:200px;
  height: 200px;
  margin: auto;
}

path {
  stroke: #C09E56;
  stroke-width: 0.5;
  stroke-dasharray: 100;
  stroke-dashoffset: -100;
  animation: draw 8s linear forwards;
  animation-delay: -0.30s!important;

}



@keyframes draw {
  to {
    stroke-dashoffset: 0;
    fill:#C09E56;
  }
}

Answer 1

刚刚发现它，stroke-dashoffset:-100造成了延迟。看起来这使绘制线条的路径更长了。
克里斯·科耶尔（Chris Coyier）解释：https://css-tricks.com/svg-line-animation-works/

不需要的SVG动画加载延迟

1 个答案: