html - SVG animation delay -


the requirement: have trouble delay setting each animation.

demo: https://codepen.io/anon/pen/oxjxvz

but logic different. each line must filled blue color, 1 one.

if set begin attribute, crashes animation rule

here code:

<lineargradient id="first"> <stop offset="0" stop-color="#4caddb">     <animate id="anima1" begin="anima2.end" dur="1s" attributename="offset" fill="freeze" from="0" to="1" repeatcount="indefinite" /> </stop> <stop offset="0" stop-color="#e1e1e1">     <animate dur="1s" attributename="offset" fill="freeze" from="0" to="1" repeatcount="indefinite" /> </stop> </lineargradient> 

and

<lineargradient id="third"> <stop offset="0" stop-color="#e1e1e1">     <animate id="anima2" dur="1s" begin="anima1.end" attributename="offset" fill="freeze" from="1" to="0" repeatcount="indefinite" /> </stop> <stop offset="0" stop-color="#4caddb">     <animate dur="1s" attributename="offset" fill="freeze" from="1" to="0" repeatcount="indefinite" /> </stop> </lineargradient> 

what missing?

an animation repeatcount="indefinite" has no end, referencing animation never starts. use begin="anima1.repeat" instead. event raised each time referenced animation starts anew.


Comments

Popular posts from this blog

neo4j - finding mutual friends in a cypher statement starting with three or more persons -

php - How to remove letter in front of the word laravel -

minify - Minimizing css files -