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
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
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
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
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.
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.
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.
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.
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
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