13.2 Controlling CSS animations

The lowest level of interactivity is declarative interactivity—animation or other style changes created by telling the browser what should happen under certain situations, without directly controlling the effect with a script. SVG provides a limited set of builtin interactive states.

Example 1

Notice. The CDATA wrapper doesn't hurt anything—it's just unnecessary in HTML5. You can keep it for compatibility if the same SVG might be used as a standalone .svg file.

Animated CSS Link Animation plays when mouse hovers over image 
<svg width="200" height="100"
    xmlns="http://www.w3.org/2000/svg">
    <title>Animated CSS Link</title>
    <desc>Animation plays when mouse hovers over image</desc>
    <style type="text/css">
    a.animatedLink {
        animation-name: animKeys;
        animation-iteration-count: infinite;
        animation-duration: 0.5s;
        animation-direction: alternate;
        animation-play-state: paused;
    }
    a.animatedLink:hover {
        animation-play-state: running;
    }
    @keyframes animKeys {
        0% {fill-opacity: 1.0;}
        100% {fill-opacity: 0.5;}
    }
    </style>
    <a class="animatedLink" href="http://www.w3.org/SVG/" target="_blank">
        <circle cx="50" cy="70" r="20" style="fill: red;"/>
        <rect x="75" y="50" width="40" height="40" style="fill: green;"/>
        <path d="M120 90, 140 50, 160 90 Z" style="fill: blue;"/>
     </a>
</svg>