Basic CSS animations and transitions with SVG

One of the most interesting ways to work with SVG and CSS is with CSS animations and transitions.

• Animations: This allow you to assign animations to elements. These animations are defined as a series of changes to CSS properties.
• Transitions: This allow you to control the time it takes for CSS property changes to take effect. Instead of immediately changing, they transition between states. 

These are a very powerful set of features and are an important conceptual and technical addition to your SVG toolkit. 

CSS animations 

CSS animations in SVG work the same way as they do in HTML, with the addition of the ability to use the SVG-specific properties. 

...