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.

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.