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

Question

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" attributeName="fill" from="#ED1C24" 
to="#fff" xlink:href="#test" dur="2s" fill="freeze" />
<animate attributeName="fill" from="" to="#ED1C24"
xlink:href="#test" begin="" onrepeat=" dur="2s" fill="freeze" />

I want the second animation to begin when the first one ends, I know this is possible, I just can't figure it out.

Buhr

Answer 1

Using your example, here's how:

<circle id="test" fill="#ED1C24" cx="96.881" cy="91.953" r="26.485"/>
<animate id="testies" attributeName="fill" from="#ED1C24" to="#fff"
  xlink:href="#test" dur="2s" fill="freeze" />  
<animate attributeName="fill" from="" to="#ED1C24" xlink:href="#test"
  begin="testies.end" dur="2s" fill="freeze" />

or as an equivalent alternative without the xlink:href syntax:

<circle id="test" fill="#ED1C24" cx="96.881" cy="91.953" r="26.485">
  <animate id="testies" attributeName="fill" from="#ED1C24" to="#fff"
    dur="2s" fill="freeze" />  
  <animate attributeName="fill" from="" to="#ED1C24"
    begin="testies.end" dur="2s" fill="freeze" />
</circle>

So, basically just add the id of the element you want to trigger the other animation from and add a ".end" suffix. You can also specify ".begin" to trigger on the beginning of an animation, or add a time offset, e.g begin="someId.end+2s".

It's also possible to use events to trigger animations, the syntax is similar: id followed by a dot and then the name of the event and optionally a time offset. See the list of events that are required in SVG 1.1 here (the leftmost column labeled "Event name" is what applies here).

If you're not scared of specifications see the full syntax of the begin attribute for all the details.

Breechloader

This currently does not work in Chrome (34). EDIT: My mistake, is working fine. – Protract

how to use onrepeat attribute? can you explain it with example – Farinaceous

@RiteshDhuri in this example the onrepeat attribute doesn't do anything at all. – Corking

is it possible to replicate this behavior with javascript ? – Fructiferous