32

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.

serg
  • 109,619
  • 77
  • 317
  • 330

3 Answers3

42

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"/>
serg
  • 109,619
  • 77
  • 317
  • 330
  • 2
    Works in (oold) Firefox 10, doesn't work in (up-to-date) Chrome 32, just if anyone encounters the same issue. And some useful links describing all the capabilities of animation timing: [W3C SVG 1.1 Spec.](http://www.w3.org/TR/SVG/animate.html#TimingAttributes), [Developer.Mozilla.org](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/begin). – Jeyekomon Jan 20 '14 at 00:06
36

You can also just loop within a single animateTransform by providing a values attribute with a semi-colon separated list:

<animateTransform attributeName="transform" type="rotate"
     values="0;30;0" begin="0s" dur="0.8s" fill="freeze"
     repeatCount="indefinite" />

Here's an example (checked in Firefox 4.0 and Chrome).

robertc
  • 74,533
  • 18
  • 193
  • 177
  • 2
    @janaspage I just stumbled across documentation for the values attribute here: http://www.w3.org/TR/smil-animation/#ValuesAttribute – chrisM Jun 26 '14 at 13:36
  • although this accomplishes the task, it doesn't actually sequence two animations; would be nice to know how to sequence animations and repeart them in SMIL – Captain Fantastic Dec 17 '22 at 14:00
8

it's also possible to add/subtract (milli)seconds: 

  begin="anim2.end-500ms"
Sathyajith Bhat
  • 21,321
  • 22
  • 95
  • 134
Ingmar de Lange
  • 289
  • 3
  • 16