This SVG example illustrates how to create a chain to two color animations so that one follows the other. In this example, the fill color of the circle is changed from white to gray and then back to white.

ChainedColorAnimation.svg

<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
  <circle cx="150" cy="150" r="100" fill="white" stroke="lightgray">
    <animate id="a1" attributeName="fill" from="white" to="gray" dur="3s" fill="freeze" />
    <animate id="a2" attributeName="fill" from="gray" to="white" begin="a1.end" dur="3s" fill="freeze" />
  <circle>
</svg>

Output