SVG Smil Sequencing

<!doctype html>
<title>Example</title>
<svg width="300" height="150" viewBox="0 0 200 100">
  
  <circle cx="50" cy="80" r="15" fill="skyblue" opacity="0">
    <animate id="anim1" attributeName="opacity" to="1" dur="0.5s" begin="0s; reset.end" fill="freeze" />
    <animate attributeName="cy" from="80" to="50" dur="0.5s" begin="0s; reset.end" fill="freeze" />
  </circle>

<circle cx="100" cy="80" r="15" fill="tomato" opacity="0">
    <animate id="anim2" attributeName="opacity" to="1" dur="0.5s" begin="anim1.end + 0.2s" fill="freeze" />
    <animate attributeName="cy" from="80" to="50" dur="0.5s" begin="anim1.end + 0.2s" fill="freeze" />
  </circle>

<circle cx="150" cy="80" r="15" fill="gold" opacity="0">
    <animate id="anim3" attributeName="opacity" to="1" dur="0.5s" begin="anim2.end + 0.2s" fill="freeze" />
    <animate attributeName="cy" from="80" to="50" dur="0.5s" begin="anim2.end + 0.2s" fill="freeze" />
  </circle>

<animate id="reset" attributeName="display" to="none" dur="0.1s" begin="anim3.end + 2s" fill="remove" />
</svg>