Rotating a SVG with Css (Animation)
Here is your original animation css (I have removed prefixes to keep it simple):
#gear{
animation-name: ckw;
animation-duration: 15.5s;
}
@keyframes ckw {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
In #gear you should add:
- animation-iteration-count to infinite to keep it rolling
- transform-origin to center of your div 50% 50% to get gear rolling around itself
- display to inline-block
Result:
#gear{
animation-name: ckw;
animation-duration: 15.5s;
/* Things added */
animation-iteration-count: infinite;
transform-origin: 50% 50%;
display: inline-block;
/* <--- */
}
@keyframes ckw {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
And of course add correct prefixes.
SVG Path rotation animation
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); }
}
}
How to rotate a SVG object around its own center?
As I've commented you need to add .Gear { animation: rotate 3s infinite; transform-origin: 50% 50%; transform-box: fill-box; }
to the css.
.Gear { animation: rotate 3s infinite; transform-origin: 50% 50%; transform-box: fill-box; } @keyframes rotate{ from{ transform: rotate(0deg);}to{ transform: rotate(360deg); } }
<svg id="svg8" version="1.1" viewBox="0 0 151.07708 104.24584" height="394" width="571"> <g transform="translate(2.1166667,-0.52916663)" id="BlueBigMiddleGear" style="display:inline;opacity:1;"> <path style="opacity:1;fill:#00a2a2;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;" d="m 18.56808,26.571725 c 3.275987,0.593468 5.566928,-3.837863 3.354539,-5.905877 2.060394,-2.103327 4.554573,-3.44753 7.370537,-4.228609 3.039988,3.951776 5.072643,2.096573 7.063427,0 2.964733,0.684319 5.126395,2.38586 7.157927,4.252232 -1.375995,3.387617 -0.456277,5.532848 3.519902,6.023994 0.978251,2.764264 0.950956,5.496092 -0.02363,8.197361 -3.529105,0.674199 -4.86411,2.602169 -3.543527,6.047618 -2.020934,1.811043 -4.052787,3.610561 -7.181546,4.252233 -2.285064,-2.600365 -4.628765,-2.737974 -7.039808,-0.04725 -2.530906,-0.889292 -5.092152,-1.679982 -7.1343,-4.157739 1.350522,-2.998678 0.192879,-5.025441 -3.496279,-6.071243 -0.882856,-2.787573 -0.865144,-5.575147 -0.04724,-8.36272 z" id="path1423" /> <ellipse style="opacity:1;fill:#00a2a2;fill-opacity:1;stroke:#ffffff;stroke-width:8.47981644;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill;" id="path1430" cx="32.735146" cy="30.88035" rx="4.403945" ry="4.2703118" /> </g> <g transform="rotate(-6.5973029,34.401484,29.663413);" style="display:inline" id="Gear" class="Gear" > <path style="opacity:1;fill:#d14330;fill-opacity:1;stroke:none;stroke-width:0.26458332px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" d="m 44.553944,39.635527 c 0.759184,-2.153091 2.305531,-2.691365 3.897878,-3.165549 2.004141,1.775246 3.092697,0.749881 4.039622,-0.708707 2.071027,0.07811 3.438224,0.805907 4.701076,1.630024 -0.458034,1.912119 -0.200249,3.386793 2.716705,3.23642 0.666429,1.622148 1.272712,3.244296 0.826823,4.866444 -1.948655,0.784004 -2.499529,2.043252 -1.299292,3.897879 -1.018053,1.3543 -2.242948,2.455793 -3.82701,3.118305 -1.827113,-1.587302 -3.075307,-0.903465 -4.086868,0.708705 -1.440932,0.07133 -3.008161,-0.425679 -4.701077,-1.488282 0.426697,-2.797344 -0.9364,-3.293526 -2.693082,-3.283669 -0.933271,-1.379303 -1.4003,-2.914021 -0.826823,-4.795573 1.91108,-0.754162 2.238206,-2.128133 1.252048,-4.015997 z" id="path1438" /> <circle style="opacity:1;fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:9.71524143;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:markers stroke fill" id="path1441" cx="51.99535" cy="44.62009" r="2.5277159" /> </g> </svg>
SVG rotation on center axis
Set the
transform="translate(-154 -131)"
attribute on the petals group, not the individual paths. Otherwise, the rotate transformation will replace the translation.Set
transform-box: fill-box
to clarify whattransform-origin: center
relates to.
/* ROTATE ANIMATION */@keyframes rotateIn { from {opacity: 0; transform: rotate(0deg);} to {opacity: 0.5; transform: rotate(140deg);}} /* ANIMATE PETALS */path[id^="petal"]{ opacity: 0; transform: rotate(0deg); transform-origin: center; transform-box: fill-box; animation:rotateIn ease-in 1; animation-fill-mode:forwards; animation-duration:0.5s;}
#petal1 { animation-delay: 0.2s;}
#petal2 { animation-delay: 0.4s;}
#petal3 { animation-delay: 0.6s;}
#petal4 { animation-delay: 0.8s;}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1504 750"> <title>PETAL_BG-03</title> <g id="PETALS" transform="translate(-154 -131)"> <path id="petal1" d="M770,736.76c-29.27-69.28-25-172.9,18-275.52S901.75,282.87,971.65,255.12c29.27,69.28,25,172.9-18,275.53S839.85,709,770,736.76Z" style="fill:#f0fc00;stroke:#fff;stroke-miterlimit:10;stroke-width:2px;opacity:0" /> <path id="petal2" d="M836.94,413.32c103.06-41.93,206.72-45.14,275.7-15.17-28.47,69.61-104.92,139.68-208,181.61S697.94,624.9,629,594.93C657.43,525.32,733.88,455.25,836.94,413.32Z" style="fill:#f0fc00;stroke:#fff;stroke-miterlimit:10;stroke-width:2px;opacity:0" /> <path id="petal3" d="M1110.91,599.28c-69.49,28.78-173.07,23.78-275.4-19.91S658,464.3,630.69,394.2c69.49-28.78,173.07-23.78,275.39,19.92S1083.65,529.18,1110.91,599.28Z" style="fill:#f0fc00;stroke:#fff;stroke-miterlimit:10;stroke-width:2px;opacity:0" /> <path id="petal4" d="M968.79,738.94c-69.57-28.58-139.51-105.15-181.27-208.28s-44.8-206.79-14.71-275.72c69.57,28.58,139.51,105.15,181.27,208.28S998.87,670,968.79,738.94Z" style="fill:#f0fc00;stroke:#fff;stroke-miterlimit:10;stroke-width:2px;opacity:0" /> </g> <g id="CENTER"> <circle id="centercircle" cx="716.8" cy="365.34" r="108.5" style="fill:#725400;stroke:#fff;stroke-miterlimit:10;stroke-width:2px" /> </g></svg>
CSS to flip (rotate) horizontally an SVG from center only works with image
Its specific of SVG CSS Transformation. You can read about it here.
You need define transform-origin property.
`transform-origin: center center; `
https://jsfiddle.net/Ldm0ytft/2/
svg animate rotate during move
This is how I would do it: instead of animating the d attribute of the star I would translate the star to the new location with animate In order to make the 2 animations work together I'm using additive="sum"
for the second animation.
svg{width:90vh}
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg">
<path id="star" d="M100,10 L122.45,69.1 L185.6,72.19 L136.33,111.8 L152.9,172.81 L100,138.2 L47.1,172.81 L63.67,111.8 L14.4,72.19 L77.55,69.1Z" fill="gray" stroke="lightgreen" stroke-linejoin="round" stroke-linecap="round" stroke-width="15">
<animateTransform attributeName="transform" attributeType="XML" type="translate" to="300 300" dur="2s" begin="0s" repeatCount="1" fill="freeze" ></animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 99.6 91.4" to="360 99.6 91.4" dur="2s" begin="0s" repeatCount="1" fill="freeze" additive="sum"></animateTransform>
</path>
</svg>
SVG animation rotate a path around a center point.
I am going to make an educated guess and say it is because you used the centre of the shape rather than the centre of the circular part of the shape. If that is the case, then the arrowhead will be resulting in an offset centre.
By my reckoning, the centre is at approx (8.4, 9.5).
Also you'll get better results if you rotate just the path - rather than the whole SVG as you are doing now.
Any remaining wobble is due to the fact that the arrow path does not appear to be perfectly circular.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 17 17" > <style type="text/css"> .st0{fill:#000000;} </style> <path id="arrow" class="st0" d="M9.3,16.4c3.2-0.4,5.8-2.9,6.2-6.1c0.5-4.2-2.8-7.7-6.9-7.8V0.6c0-0.1-0.1-0.2-0.2-0.1l-4,2.9 c-0.1,0-0.1,0.1,0,0.2l3.9,2.8c0.1,0.1,0.2,0,0.2-0.1V4.5c2.9,0,5.2,2.5,5,5.4c-0.2,2.5-2.2,4.5-4.8,4.7c-2.7,0.2-5-1.7-5.4-4.2 c-0.1-0.5-0.5-0.8-1-0.8c-0.6,0-1,0.5-1,1.1C2.1,14.2,5.4,16.9,9.3,16.4L9.3,16.4z"> <animateTransform attributeType="xml" attributeName="transform" type="rotate" from="360 8.4 9.5" to="0 8.4 9.5" dur="0.5s" additive="sum" repeatCount="indefinite" /> </path></svg>
Why CSS animation (rotate) does not work in iOS 15.4
Finally, as A Haworth mentioned,it seems there is an issue with (360deg), but also it doesn't work well with (359deg) or anything more than (180deg).
So I changed the animation to rotate to (-360deg) and I set the animation direction for the element to "reverse".
I post again the updated snippet.
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-268 0 570 570" class="hero-slider__svg-animation" width="160">
<style>
.hero-slider__svg-animation {
-webkit-animation: heroSliderSvgAnimation 1s linear infinite;
animation: heroSliderSvgAnimation 1s linear infinite;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
@-webkit-keyframes heroSliderSvgAnimation {
0% {
-webkit-transform: rotate(0deg);
-webkit-transform-origin: 50% 50%;
}
100% {
-webkit-transform: rotate(-360deg);
-webkit-transform-origin: 50% 50%;
}
}
@keyframes heroSliderSvgAnimation {
0% {
transform: rotate(0deg);
transform-origin: 50% 50%;
}
100% {
transform: rotate(-360deg);
transform-origin: 50% 50%;
}
}
</style>
<path d="M12.7,562.6v-89.3c33.6-0.2,65.2-9.1,92.4-24.7l84.2,19.9L168.1,390c20.2-30,31.9-66.1,31.9-105 c0-103.7-83.8-187.8-187.4-188.3V7.4C165.6,7.9,289.3,132,289.3,285C289.3, 438,165.6,562.1,12.7,562.6z"/>
</svg>
Related Topics
CSS: Nth-Of-Type() and: Not() Selector
Should I Locally Store CSS Generated by The Google Web Fonts API
Highlighting All Rowspans Within a Table Row Using CSS Only
Matdialog Doesn't Open as Dialog
How to Make Vim Alphabetically Sort CSS Rules Within a Single Line
Roboto from Materializecss Weird Font Rendering in Chrome, Firefox, Ok with Ie
R Knitr Markown: Setting HTML Page Width
Why Is Browser Showing Td's Larger Than My Specified Width Property
How to Make an Svg Masked Image Compatible with Internet Explorer
Reactjs Change Background Image Dynamically
Angular 2: How to Correctly Automatically Import Normalize.CSS
Turn Off Animations in Capybara Tests
Fix Warning "Also Define The Standard Property 'Box-Shadow' for Compatibility"
CSS @Supports (::Pseudo-Element)
Equivalent for '-Moz-Element' in Other Browsers
CSS Select Dropdown Bold on Some <Option>'s
CSS Problem - Link (Position:Absolute) Above a Box Not Work in Ie + Opera