CSS Animation

SVG can be animated in the same way as html. It is vital that the SVG is included in the same file as the rest of the html. It is possible not to do this: you can include an SVG file into a page using the img tag. But if you do then trying to animate it won't work!

In this example we make two things happen at the same time: a circle moves and changes colour. This is simple to do: in the from block and the to block in @keyframes we can put all the animations we want:

      @keyframes swing-green-red {
        from {
          transform: translateX(0px);
          fill: green;
        }
        to {
          transform: translateX(600px);
          fill: red;
        }
      }
  
      .disk {
        animation: 4s ease 1s infinite alternate both running swing-green-red;
      }