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
Post a Comment