html - Restart entire SVG animateTransform sequence? -
i have svg graphic animating via animatetransform
. animates in, stays on screen until click it, scales down 0 , cannot brought back. want restart entire animation sequence on 2 seconds after last animation has ended (scaled 0), animate in.
how can this? thanks!
<!-- keep scaled @ 0 on load --> <animatetransform attributename="transform" attributetype="xml" type="scale" from="0" to="0" dur="0.5s"/> <!-- scale after 0.5 seconds --> <animatetransform attributename="transform" attributetype="xml" type="scale" from="0" to="1" begin="0.5s" dur="0.3s" fill="freeze" additive="sum"/> <!-- scale down on click --> <animatetransform id="animatfinished" attributename="transform" attributetype="xml" type="scale" from="1" to="0" begin="click" dur="0.6s" fill="freeze" additive="sum"/>
we need start first transform both @ time 0 , 2 seconds after onclick animation has ended gives begin="0s;animatfinished.end+2s"
the second animation needs start when first has ended otherwise fire once.
and use of additive="sum" giving problems animations end trying add scale has scale of 0 nothing 0 x value = 0.
so, think you're looking for:
<!-- keep scaled @ 0 on load --> <animatetransform id="one" attributename="transform" attributetype="xml" type="scale" from="0" to="0" begin="0s;animatfinished.end+2s" dur="0.5s" fill="freeze"/> <!-- scale after 0.5 seconds --> <animatetransform attributename="transform" attributetype="xml" type="scale" from="0" to="1" begin="one.end" dur="0.3s" fill="freeze"/> <!-- scale down on click --> <animatetransform id="animatfinished" attributename="transform" attributetype="xml" type="scale" from="1" to="0" begin="click" dur="0.6s" fill="freeze"/>
Comments
Post a Comment