smil_css_animation.svg

Enable keyboard shortcuts

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">

  <style>

  @keyframes color {

    0% {fill: blue;}

    100% {fill: red;}

  rect {

  animation-duration: 1s;

  animation-name: color;

  animation-timing-function: linear;

  animation-iteration-count: 1;

  </style>

  <rect x="50" y="50" width="100" height="100" fill="blue" stroke="gold" stroke-width="10">

    <animateTransform attributeName="transform" type="rotate" from="0 100 100" to="180 100 100" dur="1s" repeatCount="1"/>

  </rect>

</svg>