Why doesn't my SVG/CSS/JS animation work as expected?

Question

I'm trying to animate an SVG I created in Inkscape using CSS/JS, and it seems like it should be fairly simple: I'm just adding the

.rotating

class to

#gear-small

on hover:

.logo {

  overflow: visible;

  transform: scale(0.5);

}



.rotating {

  animation-name: rotate; 

  animation-duration: 3s; 

  animation-iteration-count: infinite;

  animation-timing-function: linear;

}



@keyframes rotate {

  from {transform: rotate(0deg);}

  to {transform: rotate(360deg);}

}

The problem is that, although the element rotates, it also seems to move to 0,0,0. I'm not sure what's going on here. I suspect it might have to do with the inline transform properties, but I'm pretty dumb on this one, so any help would be appreciated.

Looking at the jsfiddle I made should make everything clear.

I've tried overriding transform properties in my stylesheet, but it still seems to translate it to 0,0,0 no matter what I do.

Edit: To be clear, the gear is supposed to stay in place and rotate like a wheel.

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

You forgot to add the initial transformation to your keyframes, so it's being overriden:

@keyframes rotate {
  from {transform: translate(40.785px, 47.68px) rotate(0deg);}
  to {transform: translate(40.785px, 47.68px) rotate(360deg);}
}

Please see the updated jsfiddle: https://jsfiddle.net/mj2ozjvd/2/

You may update animation-duration with the correct timings (it's easy to count) for the precize animation.

Why doesn't my SVG/CSS/JS animation work as expected?

Sign up