SVG Path rotation animation
I'm trying to get part of my SVG to rotate, but it seems like it's rotating around an extremely large origin, which is confusing because the actual path is incredibly small.
Here is my path element animation css:
.wing1 {
transform-origin: bottom right;
animation: spin 6s cubic-bezier(.8, 0, .2, 1) infinite;
@keyframes spin {
50% { transform: rotate(45deg); }
100% { transform: rotate(0deg); }
}
}
Here is the JSFiddle (with the SVG included): http://jsfiddle.net/c5g3sq4e/
I'm trying to get the wing element to rotate around the bottom right corner so that it looks like it's flying, but I've never done SVG element rotation so I'm not sure that I've specified the origin correctly.
css3 svg css-animations
asked Nov 13 '18 at 6:06
Turner Houghton
305313
add a comment |
I'm trying to get part of my SVG to rotate, but it seems like it's rotating around an extremely large origin, which is confusing because the actual path is incredibly small.
Here is my path element animation css:
.wing1 {
transform-origin: bottom right;
animation: spin 6s cubic-bezier(.8, 0, .2, 1) infinite;
@keyframes spin {
50% { transform: rotate(45deg); }
100% { transform: rotate(0deg); }
}
}
Here is the JSFiddle (with the SVG included): http://jsfiddle.net/c5g3sq4e/
I'm trying to get the wing element to rotate around the bottom right corner so that it looks like it's flying, but I've never done SVG element rotation so I'm not sure that I've specified the origin correctly.
css3 svg css-animations
asked Nov 13 '18 at 6:06
Turner Houghton
305313
add a comment |
I'm trying to get part of my SVG to rotate, but it seems like it's rotating around an extremely large origin, which is confusing because the actual path is incredibly small.
Here is my path element animation css:
.wing1 {
transform-origin: bottom right;
animation: spin 6s cubic-bezier(.8, 0, .2, 1) infinite;
@keyframes spin {
50% { transform: rotate(45deg); }
100% { transform: rotate(0deg); }
}
}
Here is the JSFiddle (with the SVG included): http://jsfiddle.net/c5g3sq4e/
I'm trying to get the wing element to rotate around the bottom right corner so that it looks like it's flying, but I've never done SVG element rotation so I'm not sure that I've specified the origin correctly.
css3 svg css-animations
asked Nov 13 '18 at 6:06
Turner Houghton
305313
I'm trying to get part of my SVG to rotate, but it seems like it's rotating around an extremely large origin, which is confusing because the actual path is incredibly small.
Here is my path element animation css:
.wing1 {
transform-origin: bottom right;
animation: spin 6s cubic-bezier(.8, 0, .2, 1) infinite;
@keyframes spin {
50% { transform: rotate(45deg); }
100% { transform: rotate(0deg); }
}
}
Here is the JSFiddle (with the SVG included): http://jsfiddle.net/c5g3sq4e/
I'm trying to get the wing element to rotate around the bottom right corner so that it looks like it's flying, but I've never done SVG element rotation so I'm not sure that I've specified the origin correctly.
css3 svg css-animations
css3 svg css-animations
asked Nov 13 '18 at 6:06
Turner Houghton
305313
asked Nov 13 '18 at 6:06
Turner Houghton
305313
asked Nov 13 '18 at 6:06
Turner Houghton
305313
asked Nov 13 '18 at 6:06
Turner Houghton
305313
asked Nov 13 '18 at 6:06
Turner Houghton
305313
305313
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
You need to add transform-box: fill-box; This will make the object bounding box to be used as the reference box.
.wing1 {
transform-origin: bottom right;
transform-box: fill-box;
animation: spin 6s cubic-bezier(.8, 0, .2, 1) infinite;
@keyframes spin {
50% { transform: rotate(45deg); }
100% { transform: rotate(0deg); }
}
}
answered Nov 13 '18 at 7:07
enxaneta
6,1892416
1
transform-boxis a recent thing. If you want to be compatible with older browser versions, consider using absolute coordinates instead. Eg.transform-origin: 736px -124px;
– Paul LeBeau
Nov 13 '18 at 12:18
transform-boxis a recent thing used to fix another recent thing. This pen: codepen.io/mandymichael/details/LEpywo (as the author comment) used to work best in chrome. Not any longer. Back in 2014-2015 this pen worked withouttransform-box. Now you would needtransform-boxto make it work properly.
– enxaneta
Nov 13 '18 at 13:00
2
Not exactly. That Chrome behaviour was a bug. Which they have now fixed.transform-boxwas added to provide flexibility in how to interprettransform-origin. Your fix will work now in most browsers. But it won't work in a Firefox from a year ago - with or withouttransform-box. My suggestion will work in all versions of Chrome and Firefox.
– Paul LeBeau
Nov 13 '18 at 13:49
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
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%2f53274783%2fsvg-path-rotation-animation%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
You need to add transform-box: fill-box; This will make the object bounding box to be used as the reference box.
.wing1 {
transform-origin: bottom right;
transform-box: fill-box;
animation: spin 6s cubic-bezier(.8, 0, .2, 1) infinite;
@keyframes spin {
50% { transform: rotate(45deg); }
100% { transform: rotate(0deg); }
}
}
answered Nov 13 '18 at 7:07
enxaneta
6,1892416
1
transform-boxis a recent thing. If you want to be compatible with older browser versions, consider using absolute coordinates instead. Eg.transform-origin: 736px -124px;
– Paul LeBeau
Nov 13 '18 at 12:18
transform-boxis a recent thing used to fix another recent thing. This pen: codepen.io/mandymichael/details/LEpywo (as the author comment) used to work best in chrome. Not any longer. Back in 2014-2015 this pen worked withouttransform-box. Now you would needtransform-boxto make it work properly.
– enxaneta
Nov 13 '18 at 13:00
2
Not exactly. That Chrome behaviour was a bug. Which they have now fixed.transform-boxwas added to provide flexibility in how to interprettransform-origin. Your fix will work now in most browsers. But it won't work in a Firefox from a year ago - with or withouttransform-box. My suggestion will work in all versions of Chrome and Firefox.
– Paul LeBeau
Nov 13 '18 at 13:49
add a comment |
You need to add transform-box: fill-box; This will make the object bounding box to be used as the reference box.
.wing1 {
transform-origin: bottom right;
transform-box: fill-box;
animation: spin 6s cubic-bezier(.8, 0, .2, 1) infinite;
@keyframes spin {
50% { transform: rotate(45deg); }
100% { transform: rotate(0deg); }
}
}
answered Nov 13 '18 at 7:07
enxaneta
6,1892416
1
transform-boxis a recent thing. If you want to be compatible with older browser versions, consider using absolute coordinates instead. Eg.transform-origin: 736px -124px;
– Paul LeBeau
Nov 13 '18 at 12:18
transform-boxis a recent thing used to fix another recent thing. This pen: codepen.io/mandymichael/details/LEpywo (as the author comment) used to work best in chrome. Not any longer. Back in 2014-2015 this pen worked withouttransform-box. Now you would needtransform-boxto make it work properly.
– enxaneta
Nov 13 '18 at 13:00
2
Not exactly. That Chrome behaviour was a bug. Which they have now fixed.transform-boxwas added to provide flexibility in how to interprettransform-origin. Your fix will work now in most browsers. But it won't work in a Firefox from a year ago - with or withouttransform-box. My suggestion will work in all versions of Chrome and Firefox.
– Paul LeBeau
Nov 13 '18 at 13:49
add a comment |
You need to add transform-box: fill-box; This will make the object bounding box to be used as the reference box.
.wing1 {
transform-origin: bottom right;
transform-box: fill-box;
animation: spin 6s cubic-bezier(.8, 0, .2, 1) infinite;
@keyframes spin {
50% { transform: rotate(45deg); }
100% { transform: rotate(0deg); }
}
}
answered Nov 13 '18 at 7:07
enxaneta
6,1892416
You need to add transform-box: fill-box; This will make the object bounding box to be used as the reference box.
.wing1 {
transform-origin: bottom right;
transform-box: fill-box;
animation: spin 6s cubic-bezier(.8, 0, .2, 1) infinite;
@keyframes spin {
50% { transform: rotate(45deg); }
100% { transform: rotate(0deg); }
}
}
answered Nov 13 '18 at 7:07
enxaneta
6,1892416
answered Nov 13 '18 at 7:07
enxaneta
6,1892416
answered Nov 13 '18 at 7:07
enxaneta
6,1892416
answered Nov 13 '18 at 7:07
enxaneta
6,1892416
6,1892416
1
transform-boxis a recent thing. If you want to be compatible with older browser versions, consider using absolute coordinates instead. Eg.transform-origin: 736px -124px;
– Paul LeBeau
Nov 13 '18 at 12:18
transform-boxis a recent thing used to fix another recent thing. This pen: codepen.io/mandymichael/details/LEpywo (as the author comment) used to work best in chrome. Not any longer. Back in 2014-2015 this pen worked withouttransform-box. Now you would needtransform-boxto make it work properly.
– enxaneta
Nov 13 '18 at 13:00
2
Not exactly. That Chrome behaviour was a bug. Which they have now fixed.transform-boxwas added to provide flexibility in how to interprettransform-origin. Your fix will work now in most browsers. But it won't work in a Firefox from a year ago - with or withouttransform-box. My suggestion will work in all versions of Chrome and Firefox.
– Paul LeBeau
Nov 13 '18 at 13:49
add a comment |
1
transform-boxis a recent thing. If you want to be compatible with older browser versions, consider using absolute coordinates instead. Eg.transform-origin: 736px -124px;
– Paul LeBeau
Nov 13 '18 at 12:18
transform-boxis a recent thing used to fix another recent thing. This pen: codepen.io/mandymichael/details/LEpywo (as the author comment) used to work best in chrome. Not any longer. Back in 2014-2015 this pen worked withouttransform-box. Now you would needtransform-boxto make it work properly.
– enxaneta
Nov 13 '18 at 13:00
2
Not exactly. That Chrome behaviour was a bug. Which they have now fixed.transform-boxwas added to provide flexibility in how to interprettransform-origin. Your fix will work now in most browsers. But it won't work in a Firefox from a year ago - with or withouttransform-box. My suggestion will work in all versions of Chrome and Firefox.
– Paul LeBeau
Nov 13 '18 at 13:49
1
1
transform-box is a recent thing. If you want to be compatible with older browser versions, consider using absolute coordinates instead. Eg. transform-origin: 736px -124px;– Paul LeBeau
Nov 13 '18 at 12:18
transform-box is a recent thing. If you want to be compatible with older browser versions, consider using absolute coordinates instead. Eg. transform-origin: 736px -124px;– Paul LeBeau
Nov 13 '18 at 12:18
transform-box is a recent thing used to fix another recent thing. This pen: codepen.io/mandymichael/details/LEpywo (as the author comment) used to work best in chrome. Not any longer. Back in 2014-2015 this pen worked without transform-box. Now you would need transform-box to make it work properly.– enxaneta
Nov 13 '18 at 13:00
transform-box is a recent thing used to fix another recent thing. This pen: codepen.io/mandymichael/details/LEpywo (as the author comment) used to work best in chrome. Not any longer. Back in 2014-2015 this pen worked without transform-box. Now you would need transform-box to make it work properly.– enxaneta
Nov 13 '18 at 13:00
2
2
Not exactly. That Chrome behaviour was a bug. Which they have now fixed.
transform-box was added to provide flexibility in how to interpret transform-origin. Your fix will work now in most browsers. But it won't work in a Firefox from a year ago - with or without transform-box. My suggestion will work in all versions of Chrome and Firefox.– Paul LeBeau
Nov 13 '18 at 13:49
Not exactly. That Chrome behaviour was a bug. Which they have now fixed.
transform-box was added to provide flexibility in how to interpret transform-origin. Your fix will work now in most browsers. But it won't work in a Firefox from a year ago - with or without transform-box. My suggestion will work in all versions of Chrome and Firefox.– Paul LeBeau
Nov 13 '18 at 13:49
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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%2f53274783%2fsvg-path-rotation-animation%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
