SVG animation, CSS spin animation but stay on the same place
up vote
3
down vote
favorite
I am animating a propeller on my website.
http://bug.soulmates.company (See section 3)
But even though I set style to:
.propeller_spin {
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
transform-origin: center center;
}
@keyframes spin {
from {
transform:rotate(0deg);
transform-origin: center center;
}
to {
transform:rotate(360deg);
transform-origin: center center;
}
}
The propeller doesn´t stay on it´s place while spinning.
css animation svg
asked Nov 9 at 21:30
Doctor Jane
163
add a comment |
up vote
3
down vote
favorite
I am animating a propeller on my website.
http://bug.soulmates.company (See section 3)
But even though I set style to:
.propeller_spin {
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
transform-origin: center center;
}
@keyframes spin {
from {
transform:rotate(0deg);
transform-origin: center center;
}
to {
transform:rotate(360deg);
transform-origin: center center;
}
}
The propeller doesn´t stay on it´s place while spinning.
css animation svg
asked Nov 9 at 21:30
Doctor Jane
163
4
Please add.propeller_spin {transform-box: fill-box;}MDN link for transform-box
– enxaneta
Nov 9 at 21:48
add a comment |
up vote
3
down vote
favorite
up vote
3
down vote
favorite
I am animating a propeller on my website.
http://bug.soulmates.company (See section 3)
But even though I set style to:
.propeller_spin {
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
transform-origin: center center;
}
@keyframes spin {
from {
transform:rotate(0deg);
transform-origin: center center;
}
to {
transform:rotate(360deg);
transform-origin: center center;
}
}
The propeller doesn´t stay on it´s place while spinning.
css animation svg
asked Nov 9 at 21:30
Doctor Jane
163
I am animating a propeller on my website.
http://bug.soulmates.company (See section 3)
But even though I set style to:
.propeller_spin {
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
transform-origin: center center;
}
@keyframes spin {
from {
transform:rotate(0deg);
transform-origin: center center;
}
to {
transform:rotate(360deg);
transform-origin: center center;
}
}
The propeller doesn´t stay on it´s place while spinning.
css animation svg
css animation svg
asked Nov 9 at 21:30
Doctor Jane
163
asked Nov 9 at 21:30
Doctor Jane
163
asked Nov 9 at 21:30
Doctor Jane
163
asked Nov 9 at 21:30
Doctor Jane
163
asked Nov 9 at 21:30
Doctor Jane
163
163
4
Please add.propeller_spin {transform-box: fill-box;}MDN link for transform-box
– enxaneta
Nov 9 at 21:48
add a comment |
4
Please add.propeller_spin {transform-box: fill-box;}MDN link for transform-box
– enxaneta
Nov 9 at 21:48
4
4
Please add
.propeller_spin {transform-box: fill-box;} MDN link for transform-box– enxaneta
Nov 9 at 21:48
Please add
.propeller_spin {transform-box: fill-box;} MDN link for transform-box– enxaneta
Nov 9 at 21:48
add a comment |
1 Answer
1
active
oldest
votes
up vote
0
down vote
accepted
DOM elements measure transform-origin from their own top left corner, but SVG measures transform-origin relative to the parent SVG canvas.
You could use transform-box: fill-box on your .propeller_spin class.
The transform-box CSS property defines the layout box to which the transform and transform-origin properties relate.
answered Nov 9 at 21:55
Iulius
563312
add a comment |
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
DOM elements measure transform-origin from their own top left corner, but SVG measures transform-origin relative to the parent SVG canvas.
You could use transform-box: fill-box on your .propeller_spin class.
The transform-box CSS property defines the layout box to which the transform and transform-origin properties relate.
answered Nov 9 at 21:55
Iulius
563312
add a comment |
up vote
0
down vote
accepted
DOM elements measure transform-origin from their own top left corner, but SVG measures transform-origin relative to the parent SVG canvas.
You could use transform-box: fill-box on your .propeller_spin class.
The transform-box CSS property defines the layout box to which the transform and transform-origin properties relate.
answered Nov 9 at 21:55
Iulius
563312
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
DOM elements measure transform-origin from their own top left corner, but SVG measures transform-origin relative to the parent SVG canvas.
You could use transform-box: fill-box on your .propeller_spin class.
The transform-box CSS property defines the layout box to which the transform and transform-origin properties relate.
answered Nov 9 at 21:55
Iulius
563312
DOM elements measure transform-origin from their own top left corner, but SVG measures transform-origin relative to the parent SVG canvas.
You could use transform-box: fill-box on your .propeller_spin class.
The transform-box CSS property defines the layout box to which the transform and transform-origin properties relate.
answered Nov 9 at 21:55
Iulius
563312
answered Nov 9 at 21:55
Iulius
563312
answered Nov 9 at 21:55
Iulius
563312
answered Nov 9 at 21:55
Iulius
563312
563312
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53233509%2fsvg-animation-css-spin-animation-but-stay-on-the-same-place%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
4
Please add
.propeller_spin {transform-box: fill-box;}MDN link for transform-box– enxaneta
Nov 9 at 21:48