know-nothing know-nothing - 3 years ago 135
Javascript Question

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

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.

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download