<svg id="mySvg" width="120" height="120" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <style>
    .round {
      rx: 50%;
    }
    .green {
      fill: green;
    }
    .gradient {
      fill: url(#myGradient);
    }
  </style>
  <defs>
    <linearGradient id="myGradient">
      <stop offset="0" stop-color="red" />
      <stop offset="33.333%" stop-color="green" />
      <stop offset="66.666%" stop-color="blue" />
      <stop offset="100%" stop-color="yellow" />
    </linearGradient>
  </defs>
  <rect id="myRect" x="10%" y="10%" width="80%" height="80%">
    <set id="mySet1" attributeName="class" to="round" begin="myRect.click" dur="2s" />
    <set id="mySet2" attributeName="class" to="round green" begin="mySet1.end" dur="2s" />
    <set id="mySet3" attributeName="class" to="gradient" begin="mySet2.end" dur="2s" />
  </rect>
</svg>