动画：延迟后填充答案

【问题标题】：animation: fill after delay动画：延迟后填充
【发布时间】：2016-05-24 19:11:48
【问题描述】：

我有这个带有描边和填充动画的 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>

【问题讨论】：

标签： css animation svg

【解决方案1】：

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

例子：

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

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

【讨论】：

添加第 4 个值不会改变它。我认为这可能是因为 TO 中的 FILL:#000，因为在那里它总是会以我认为的“破折号”运行。但如果我删除它，动画根本不会触发。
发布一个小提琴，我可以修改它。

【解决方案2】：

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

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

【讨论】：