CODEWITHSUNDEEP
csssvgcss-transitions
Azrion
Azrion

Reputation: 117

Multiple animations in CSS - Only repeats the seconds animation

I want to run two animations parallel, whereas the second animation has an delay of 1s.

The code below runs perfectly in the initial iteration, however, the first animation dash01 is only executed once although I set it to run infinitely.

#Vector_42 {
    stroke-dasharray: 5;
    animation-name: dash01, dash01Rev;
    animation-duration: 5s, 5s;
    animation-delay: 0s, 1s;
    animation-iteration-count: infinite, infinite;
    animation-timing-function: linear, linear;
    animation-direction: forwards, forwards;
}

@keyframes dash01 {
    0% { stroke: #0066cc; stroke-dashoffset: 5; }
    10%, 100% { stroke-dashoffset: 15; }
}

@keyframes dash01Rev {
    0% { stroke: #0066cc; stroke-dashoffset: -5; }
    10%, 100% { stroke-dashoffset: -15; }
}

Any ideas what I am doing wrong here?

Working example: https://jsfiddle.net/Azrion/hzrbfj34/1/

Upvotes: 0

Views: 53

Answers (1)

Azrion
Azrion

Reputation: 117

Thanks to @Temani Afif's suggestion:

Simply do everything in one animation. You need to compute or estimate how much a 1s delay is and implement it that way:

@keyframes dash01{
    0% { stroke: #0066cc; stroke-dashoffset: 5; } // Start going forward
    10% { stroke-dashoffset: 15; } // Continue same way
    10.1% { stroke-dashoffset: 15; } // Still continue
    20% { stroke-dashoffset: 15; } // Still continue
    20.1% { stroke-dashoffset: -5; } // Set reverse way
    30% { stroke-dashoffset: -15; } // Go reverse now
    100% { stroke-dashoffset: -15; } // Keep going reverse :D
}

Upvotes: 1

Related Questions