Question

你好怎么慢下来SVG中风dashoffset和中风dashoffset线动画？

我想让线条以较慢的速度绘制。 Codepen是here

.st0{
    fill:none;
    stroke:#231F20;
    stroke-width:3;
}
.st2{
    fill:none;
    stroke:#231F20;
    stroke-miterlimit:10;
    stroke-width:3;
}
.st0,.st2 {
    stroke-dasharray: 958;
    stroke-dashoffset: 958;
    animation: dash 2s 5s linear forwards;
   webkit-animation:  dash 2s 5s linear forwards;
}
@keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}
@keyframes filling {
    0% {
        fill: #231F20;
    }
    100% {
        fill: #D6D3BB;
    }
}
@-webkit-keyframes dash {
    to {
        stroke-dashoffset: 0;
    }
}

Answer 1

更改持续时间对我来说很好（一旦我修复了你的样本出了问题的其他东西。

animation: dash 2s 5s linear forwards;

此动画规则中有两个时间值。第一个（2s）是动画持续时间。第二个（5s）是动画开始运行之前的延迟。要使动画运行更慢，请将第一个数字设置得更大。

animation: dash 8s 5s linear forwards;

这适用于Firefox，但要注意Chrome仍然使用animation的前缀值，因为CSS动画规范还没有完全确定。因此，对于Chrome，您需要包含以下内容：

-webkit-animation: dash 8s 5s linear forwards;

以及@-webkit-keyframe阻止。

Updated CodePen

如何减慢SVG笔划dashoffset和笔画dashoffset线动画的速度

1 个答案: