How to loop SVG animation sequence?

animation svg smil
serg picture serg · Sep 2, 2010 · Viewed 32.1k times · Source

I have sequence of animationTransform:

<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="30" begin="0s" dur="0.4s" fill="freeze"/>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="30" to="0" begin="0.4s" dur="0.4s" fill="freeze"/>

If it possible to loop this sequence without using script?

I can set individual animation to loop by using repeatCount="indefinite" by I want to loop the whole sequence in order.

Answer

serg picture serg · Sep 2, 2010

Figured it out already. Solution for those who are interested:

<animateTransform id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="0" to="30" begin="0s; anim2.end" dur="0.4s" fill="freeze"/>
<animateTransform id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="30" to="0" begin="anim1.end" dur="0.4s" fill="freeze"/>

Related questions

Deprecated SMIL SVG animation replaced with CSS or Web animations effects (hover, click)

In accordance with this topic: Firefox 38-40 SMIL problems - very slow speed (resolved in FF version 41 from 22.09.15) and this topic: Intent to deprecate: SMIL SVG tag 'animateTransform' does not work well. It would be nice to replace SMIL (animate …

Read More
how to start an animation on the end of another animation?

I am trying to have a dot fade from white to red and then from white to red. This is what I have thus far: <circle id="test" fill="#ED1C24" cx="96.881" cy="91.953" r="26.485"/> <animate id="testies" …

Read More
SVG animation is not working on IE11

I have a really simple loading animation that works perfectly on Firefox and Chrome, but in IE11 it's not showing the SVG figure. Here is the full example: JSFiddle sample SVG: <svg class="circular-loader" viewBox="25 25 50 50"> <circle class="…

Read More