Some of the animation elements you can use are:
<animate>– which allows you to animate attributes and properties over a period of time. You can also use this to target properties that can take colour values.
<set>– A convenient shorthand for animate, which is useful for assigning animation values to attributes and properties, like the visibility property.
<animateMotion>– which moves an element along a motion path.
<animateTransform>– allows you to animate one of SVG’s transformation attributes over time.
<mpath>– Reference a motion path that is to be used as a path for the motion. The mpath element is included inside the
keypoints(attribute) – used as an attribute in
animateMotionto provide control of the speed of motion path animations.
rotate(attribute) – used as an attribute for
animateMotionto control whether an object is rotated.
Why bother you ask. SVG animations can do some things you can't do with SVGs in CSS by setting attributes within the SVG especially if the SVG is embeded or used as a
background-image in CSS.
Firefox has a limited use for SVG animations and IE and Opera do not keep up with these standards so providing a fallback for them is useful.
Some examples of SVG animations that work across most browsers can be found here Mozilla SMIL Examples.
This may seem like a simple block moving around its container but using your imagination it could be a race car doing laps around a circuit, a person running or a spark travelling down a wire, to name a few things off the top of my head. I'm sure you can think of other uses for this especially as more people move online for their everyday needs I feel we need to start almost "Gamifying" our websites to draw people in so they want to visit your site.
At the moment there is plenty of websites out there that are all following the same template of having a huge image banner and using a few icons. The internet is now and the future, we need to make it look bad ass and futuristic.