Question

我有这个带有笔触和填充动画的SVG徽标，但我需要在第4秒后触发填充，因此它不会出现在第一个动画中。

<defs>
    <style>
        .st0 {
            stroke-dasharray: 800;
            stroke-dashoffset: 0;
            -webkit-animation: dash 4s linear forwards;
            -moz-animation: dash 4s linear forwards;
            -o-animation: dash 4s linear forwards;
            animation: dash 4s linear forwards;
            animation: fill .8s eas;
            -webkit-animation: fill .8s eas;
            -moz-animation: fill .8s eas;
            -o-animation: fill .8 eas;
        }   



        @-webkit-keyframes dash {
            from {
                stroke-dashoffset: 800;
            }
            to {
                stroke-dashoffset: 0;
                fill: #000;
            }
        }

    </style>
 </defs>

Answer 1

使用animation-delay属性作为animation属性中的第四个值here

示例：

.st0 {
    ....
    animation: fill .8s eas 4s;
}

但是，您可能会遇到使用语法播放两个动画的问题，如下所述：Play multiple CSS animations at the same time

Answer 2

如果我理解了这个问题，那么您正在寻找这些代码行 -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;

这些将允许您的动画运行，然后保持位置，大小以及您可能动画的其他内容:)

动画：延迟后填写

2 个答案: