Animating an SVG on hover

Question

I\'m trying to animate an SVG file on hover. by default it animates great with svg functions like:

Answer 1

This can also be accomplished with CSS. With the impending deprecation of SMIL animations, using CSS will be more future-proof.

1. Give the paths for the small and large cog their own IDs.
2. Apply a CSS animation to the cogs, with an initial animation-play-state of paused.
3. On :hover of the svg element, change the animation-play-state to running.

The demo below uses only the non-prefixed animation properties. To make it work consistently cross-browser the browser prefixes should be added.

#cogSmall,
#cogBig {
  animation-name: spin;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  transform-origin:15.887px 29.88px;
  animation-play-state: paused;
}
#cogSmall {
  animation-duration: 3000ms;
  transform-origin: 24.691px 35.778px;
  animation-direction: reverse;
}

svg:hover #cogBig,
svg:hover #cogSmall {
  animation-play-state: running;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}