title: how to start an animation on the end of another animation?
body: <p>I am trying to have a dot fade from white to red and then from white to red.</p>
  
  <p>This is what I have thus far:</p>
  
  <pre><code>&lt;circle id="test" fill="#ED1C24" cx="96.881" cy="91.953" r="26.485"/&gt;
  &lt;animate id="testies" attributeName="fill" from="#ED1C24" 
  to="#fff" xlink:href="#test" dur="2s" fill="freeze" /&gt;
  &lt;animate attributeName="fill" from="" to="#ED1C24"
  xlink:href="#test" begin="" onrepeat=" dur="2s" fill="freeze" /&gt;
  </code></pre>
  
  <p>I want the second animation to begin when the first one ends, I know this is possible, I just can't figure it out.</p>