Rotating a Svg with CSS (Animation)

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

  1. Set the transform="translate(-154 -131)" attribute on the petals group, not the individual paths. Otherwise, the rotate transformation will replace the translation.

  2. Set transform-box: fill-box to clarify what transform-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



Leave a reply



Submit