animation: fill after delay

Question

I have this SVG logo with stroke and fill animation, but i need to trigger the fill after the 4th second so it doesn't appear with the first animation.

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

score 0 · Answer 1 · edited May 23 '17 at 12:31

0

Use the animation-delay property as the fourth value in the animation attribute as described here

Example:

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

However you might run in to problems playing two animations with your syntax, as described here: Play multiple CSS animations at the same time

edited May 23 '17 at 12:31

Community

1
1

answered Mar 23 '15 at 23:06

Erik Svedin

1,286
12
26

Adding the 4th value does not change it. I am thinking it may be because of the FILL:#000 in TO, by being there it will always run with the "dash" i think. But if i remove it the animation doesn't trigger at all. – Georgi Radev Mar 23 '15 at 23:28
Post a fiddle and I'll be able to tinker with it. – Erik Svedin Mar 23 '15 at 23:40

score 0 · Answer 2 · answered May 24 '16 at 11:11

If i understand the question, then you are looking for these lines of code -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards;

These will allow your animation to run and then stay with the position, size and what ever you else might be animating :)

animation: fill after delay

2 Answers2