know-nothing know-nothing - 3 years ago 148
CSS Question

Why does this element translate to 0,0,0 in my SVG/CSS/JS animation?

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.

Edit: Here's the complete html, css and js (as per requested, sorry about that):

html:

<!DOCTYPE HTML>
<html lang='en'>
<head>
<meta charset='utf-8'/>
<link type='text/css' rel='stylesheet' href='test.css'/>
</head>
<body>
<svg
class='logo'
width="64.32mm" height="120.5mm" version="1.1" viewBox="0 0 64.32 120.5" xmlns="http://www.w3.org/2000/svg">
<g fill="#b3b3b3" stroke="#000" stroke-width=".26458">
<g id="gear-small" transform="translate(40.785 47.68)">
<path d="m8.3326-1.2236 1.0635-0.15617 0.6238 0.06064 1.7592 0.79639v1.0455l-1.7592 0.79639-0.6238 0.06064-1.0635-0.15617-0.50455 1.883 0.9991 0.3965 0.5099 0.36441 1.1254 1.5693-0.52274 0.90542-1.9218-0.18993-0.57054-0.25938-0.84293-0.667-1.3785 1.3785 0.667 0.84293 0.25938 0.57054 0.18993 1.9218-0.90542 0.52274-1.5693-1.1254-0.36441-0.5099-0.3965-0.9991-1.883 0.50455 0.15617 1.0635-0.06064 0.6238-0.79639 1.7592h-1.0455l-0.79639-1.7592-0.06064-0.6238 0.15617-1.0635-1.883-0.50455-0.3965 0.9991-0.36441 0.5099-1.5693 1.1254-0.90542-0.52274 0.18993-1.9218 0.25938-0.57054 0.667-0.84293-1.3785-1.3785-0.84293 0.667-0.57054 0.25938-1.9218 0.18993-0.52274-0.90542 1.1254-1.5693 0.5099-0.36441 0.9991-0.3965-0.50455-1.883-1.0635 0.15617-0.6238-0.06064-1.7592-0.79639v-1.0455l1.7592-0.79639 0.6238-0.06064 1.0635 0.15617 0.50455-1.883-0.9991-0.3965-0.5099-0.36441-1.1254-1.5693 0.52274-0.90542 1.9218 0.18993 0.57054 0.25938 0.84293 0.667 1.3785-1.3785-0.667-0.84293-0.25938-0.57054-0.18993-1.9218 0.90542-0.52274 1.5693 1.1254 0.36441 0.5099 0.3965 0.9991 1.883-0.50455-0.15617-1.0635 0.06064-0.6238 0.79639-1.7592h1.0455l0.79639 1.7592 0.06064 0.6238-0.15617 1.0635 1.883 0.50455 0.3965-0.9991 0.36441-0.5099 1.5693-1.1254 0.90542 0.52274-0.18993 1.9218-0.25938 0.57054-0.667 0.84293 1.3785 1.3785 0.84293-0.667 0.57054-0.25938 1.9218-0.18993 0.52274 0.90542-1.1254 1.5693-0.5099 0.36441-0.9991 0.3965z"/>
<circle r="7.9375"/>
</g>
<g id="gear-medium" transform="translate(22.021 22.021)">
<path d="m18.468-1.4872 0.46392-0.03736 1.237 0.20261 1.7194 0.71941v1.2051l-1.7194 0.71941-1.237 0.20261-0.46392-0.03736-0.24437 1.8562 0.45777 0.08399 1.1424 0.51586 1.4746 1.1399-0.31191 1.164-1.847 0.24989-1.2473-0.12445-0.43844-0.15615-0.71647 1.7297 0.42044 0.1996 0.96995 0.79396 1.1293 1.4827-0.60255 1.0437-1.8487-0.23666-1.1726-0.44302-0.38308-0.26431-1.1398 1.4854 0.35445 0.30162 0.73142 1.0179 0.70707 1.7245-0.85214 0.85214-1.7245-0.70707-1.0179-0.73142-0.30162-0.35445-1.4854 1.1398 0.26431 0.38308 0.44302 1.1726 0.23666 1.8487-1.0437 0.60255-1.4827-1.1293-0.79396-0.96995-0.1996-0.42044-1.7297 0.71647 0.15615 0.43844 0.12445 1.2473-0.24989 1.847-1.164 0.31191-1.1399-1.4746-0.51586-1.1424-0.08399-0.45777-1.8562 0.24437 0.03736 0.46392-0.20261 1.237-0.71941 1.7194h-1.2051l-0.71941-1.7194-0.20261-1.237 0.03736-0.46392-1.8562-0.24437-0.08399 0.45777-0.51586 1.1424-1.1399 1.4746-1.164-0.31191-0.24989-1.847 0.12445-1.2473 0.15615-0.43844-1.7297-0.71647-0.1996 0.42044-0.79396 0.96995-1.4827 1.1293-1.0437-0.60255 0.23666-1.8487 0.44302-1.1726 0.26431-0.38308-1.4854-1.1398-0.30162 0.35445-1.0179 0.73142-1.7245 0.70707-0.85214-0.85214 0.70707-1.7245 0.73142-1.0179 0.35445-0.30162-1.1398-1.4854-0.38308 0.26431-1.1726 0.44302-1.8487 0.23666-0.60255-1.0437 1.1293-1.4827 0.96995-0.79396 0.42044-0.1996-0.71647-1.7297-0.43844 0.15615-1.2473 0.12445-1.847-0.24989-0.31191-1.164 1.4746-1.1399 1.1424-0.51586 0.45777-0.08399-0.24437-1.8562-0.46392 0.03736-1.237-0.20261-1.7194-0.71941v-1.2051l1.7194-0.71941 1.237-0.20261 0.46392 0.03736 0.24437-1.8562-0.45777-0.08399-1.1424-0.51586-1.4746-1.1399 0.31191-1.164 1.847-0.24989 1.2473 0.12445 0.43844 0.15615 0.71647-1.7297-0.42044-0.1996-0.96995-0.79396-1.1293-1.4827 0.60255-1.0437 1.8487 0.23666 1.1726 0.44302 0.38308 0.26431 1.1398-1.4854-0.35445-0.30162-0.73142-1.0179-0.70707-1.7245 0.85214-0.85214 1.7245 0.70707 1.0179 0.73142 0.30162 0.35445 1.4854-1.1398-0.26431-0.38308-0.44302-1.1726-0.23666-1.8487 1.0437-0.60255 1.4827 1.1293 0.79396 0.96995 0.1996 0.42044 1.7297-0.71647-0.15615-0.43844-0.12445-1.2473 0.24989-1.847 1.164-0.31191 1.1399 1.4746 0.51586 1.1424 0.08399 0.45777 1.8562-0.24437-0.03736-0.46392 0.20261-1.237 0.71941-1.7194h1.2051l0.71941 1.7194 0.20261 1.237-0.03736 0.46392 1.8562 0.24437 0.08399-0.45777 0.51586-1.1424 1.1399-1.4746 1.164 0.31191 0.24989 1.847-0.12445 1.2473-0.15615 0.43844 1.7297 0.71647 0.1996-0.42044 0.79396-0.96995 1.4827-1.1293 1.0437 0.60255-0.23666 1.8487-0.44302 1.1726-0.26431 0.38308 1.4854 1.1398 0.30162-0.35445 1.0179-0.73142 1.7245-0.70707 0.85214 0.85214-0.70707 1.7245-0.73142 1.0179-0.35445 0.30162 1.1398 1.4854 0.38308-0.26431 1.1726-0.44302 1.8487-0.23666 0.60255 1.0437-1.1293 1.4827-0.96995 0.79396-0.42044 0.1996 0.71647 1.7297 0.43844-0.15615 1.2473-0.12445 1.847 0.24989 0.31191 1.164-1.4746 1.1399-1.1424 0.51586-0.45777 0.08399z"/>
<circle r="7.9375"/>
</g>
<g id="gear-large" transform="translate(32.191 88.375)">
<path d="m28.586-1.6656 1.704 0.34308 1.707 0.68859v1.2678l-1.707 0.68859-1.704 0.34308-0.14507 1.6581 1.6186 0.63377 1.5615 0.97454-0.22016 1.2486-1.8006 0.38172-1.7377 0.04196-0.43078 1.6077 1.4839 0.90519 1.3685 1.2309-0.43361 1.1914-1.8395 0.06325-1.7186-0.26042-0.70341 1.5085 1.3042 1.1491 1.134 1.4498-0.63391 1.098-1.8226-0.25714-1.6473-0.5549-0.95467 1.3634 1.0848 1.3581 0.865 1.6247-0.81494 0.9712-1.7502-0.56973-1.5259-0.8325-1.1769 1.1769 0.8325 1.5259 0.56973 1.7502-0.9712 0.81494-1.6247-0.865-1.3581-1.0848-1.3634 0.95467 0.5549 1.6473 0.25714 1.8226-1.098 0.63391-1.4498-1.134-1.1491-1.3042-1.5085 0.70341 0.26042 1.7186-0.06325 1.8395-1.1914 0.43361-1.2309-1.3685-0.90519-1.4839-1.6077 0.43078-0.04196 1.7377-0.38172 1.8006-1.2486 0.22016-0.97454-1.5615-0.63377-1.6186-1.6581 0.14507-0.34308 1.704-0.68859 1.707h-1.2678l-0.68859-1.707-0.34308-1.704-1.6581-0.14507-0.63377 1.6186-0.97454 1.5615-1.2486-0.22016-0.38172-1.8006-0.04196-1.7377-1.6077-0.43078-0.90519 1.4839-1.2309 1.3685-1.1914-0.43361-0.06325-1.8395 0.26042-1.7186-1.5085-0.70341-1.1491 1.3042-1.4498 1.134-1.098-0.63391 0.25714-1.8226 0.5549-1.6473-1.3634-0.95467-1.3581 1.0848-1.6247 0.865-0.9712-0.81494 0.56973-1.7502 0.8325-1.5259-1.1769-1.1769-1.5259 0.8325-1.7502 0.56973-0.81494-0.9712 0.865-1.6247 1.0848-1.3581-0.95467-1.3634-1.6473 0.5549-1.8226 0.25714-0.63391-1.098 1.134-1.4498 1.3042-1.1491-0.70341-1.5085-1.7186 0.26042-1.8395-0.06325-0.43361-1.1914 1.3685-1.2309 1.4839-0.90519-0.43078-1.6077-1.7377-0.04196-1.8006-0.38172-0.22016-1.2486 1.5615-0.97454 1.6186-0.63377-0.14507-1.6581-1.704-0.34308-1.707-0.68859v-1.2678l1.707-0.68859 1.704-0.34308 0.14507-1.6581-1.6186-0.63377-1.5615-0.97454 0.22016-1.2486 1.8006-0.38172 1.7377-0.04196 0.43078-1.6077-1.4839-0.90519-1.3685-1.2309 0.43361-1.1914 1.8395-0.06325 1.7186 0.26042 0.70341-1.5085-1.3042-1.1491-1.134-1.4498 0.63391-1.098 1.8226 0.25714 1.6473 0.5549 0.95467-1.3634-1.0848-1.3581-0.865-1.6247 0.81494-0.9712 1.7502 0.56973 1.5259 0.8325 1.1769-1.1769-0.8325-1.5259-0.56973-1.7502 0.9712-0.81494 1.6247 0.865 1.3581 1.0848 1.3634-0.95467-0.5549-1.6473-0.25714-1.8226 1.098-0.63391 1.4498 1.134 1.1491 1.3042 1.5085-0.70341-0.26042-1.7186 0.06325-1.8395 1.1914-0.43361 1.2309 1.3685 0.90519 1.4839 1.6077-0.43078 0.04196-1.7377 0.38172-1.8006 1.2486-0.22016 0.97454 1.5615 0.63377 1.6186 1.6581-0.14507 0.34308-1.704 0.68859-1.707h1.2678l0.68859 1.707 0.34308 1.704 1.6581 0.14507 0.63377-1.6186 0.97454-1.5615 1.2486 0.22016 0.38172 1.8006 0.04196 1.7377 1.6077 0.43078 0.90519-1.4839 1.2309-1.3685 1.1914 0.43361 0.06325 1.8395-0.26042 1.7186 1.5085 0.70341 1.1491-1.3042 1.4498-1.134 1.098 0.63391-0.25714 1.8226-0.5549 1.6473 1.3634 0.95467 1.3581-1.0848 1.6247-0.865 0.9712 0.81494-0.56973 1.7502-0.8325 1.5259 1.1769 1.1769 1.5259-0.8325 1.7502-0.56973 0.81494 0.9712-0.865 1.6247-1.0848 1.3581 0.95467 1.3634 1.6473-0.5549 1.8226-0.25714 0.63391 1.098-1.134 1.4498-1.3042 1.1491 0.70341 1.5085 1.7186-0.26042 1.8395 0.06325 0.43361 1.1914-1.3685 1.2309-1.4839 0.90519 0.43078 1.6077 1.7377 0.04196 1.8006 0.38172 0.22016 1.2486-1.5615 0.97454-1.6186 0.63377z"/>
<circle r="7.9375"/>
</g>
</g>
</svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="test.js"></script>
</body>
</html>


test.css:

.logo {
overflow: visible;
transform: scale(0.5);
}

#gear-small {
transform: translate(40.785, 47.68) !important;
}


.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);}
}


test.js:

$(document).ready(function() {
$('.logo').hover(function() {
$('#gear-small').addClass('rotating');
}, function() {
$('#gear-small').removeClass('rotating');
});
});

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