How to loop a specifically timed SVG animation sequence?

Question

So I'm looking to loop my svg animation sequence indefinitely. Heres my code:

<animateTransform xlink:href="#tri" id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="0" to="180" begin="4750ms;" dur="0.5s" fill="freeze"/> 
<animateTransform xlink:href="#tri" id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="180" to="0" begin="8000ms;" dur="0.5s" fill="freeze"/> 
<animateTransform xlink:href="#tri" id="anim3" attributeName="transform" attributeType="XML" type="rotate" from="0" to="180" begin="9750ms" dur="0.5s" fill="freeze"/>
<animateTransform xlink:href="#tri" id="anim4" attributeName="transform" attributeType="XML" type="rotate" from="180" to="0" begin="13000ms" dur="0.5s" fill="freeze"/>

After a quick google I discovered what I thought I was looking for in this SO answer, alas it was close but didn't fulfil what I needed totally.

See the difference with problem and theres is that I have specific times I want the animation to take effect (4750ms, 8000ms, 9750ms and 13000ms), whereas in the SO answer there was only a set time.

Another google brought me to this answer but it seemed the OP wasn't fussed about timings.

If you provide something that the animation can run against as a jsfiddle for instance I can test my answer. — Robert Longson, Sep 02 '15 at 17:52

score 1 · Answer 1 · answered Sep 02 '15 at 17:49

1

Sounds like you want some values and key times for those values. E.g.

<animateTransform xlink:href="#tri" id="anim1" attributeName="transform" attributeType="XML" type="rotate" values="0;0;180;180;0;0;180;180;0" keyTimes="0;4750ms;5250ms;8000ms;8500ms;9750ms;10250ms;13000ms;13500ms" fill="freeze"/>

answered Sep 02 '15 at 17:49

Robert Longson

118,664
26
252
242

I've tried this and it didn't work. Looking at sorting out a codepen now. Thanks anyway. – Diginate Sep 03 '15 at 09:01

score 1 · Answer 2 · answered Sep 04 '15 at 23:11

How about this? How to make SVG Loop Animation?

Sample code:

<svg>
  <rect>
    <animate id="o1" begin="0;o1.end" dur="10s"
    attributeName="visibility" from="hide" to="hide"/>
  </rect>
  <circle fill="orange" cx="-50" cy="100" r="20">
    <animate begin="o1.begin" 
    attributeName="cx" from="250" to="50" dur="5.05s"/>
  </circle>
  <circle fill="blue" cx="150" cy="100" r="50" />
  <circle fill="orange" cx="-50" cy="100" r="20">
    <animate begin="o1.begin+5s" 
    attributeName="cx" from="50" to="250" dur="5.05s"/>
  </circle>
</svg>

How to loop a specifically timed SVG animation sequence?

2 Answers2