SVG rotation on center axis - svg

Question

I have a SVG graphic is supposed to make a flower, where the petals will fade in and rotate at timed intervals. What is happening is that the petals will not rotate on the center point of the circle in the middle of the flower. The petals are movingto the left when animated instead of rotating and fading in where they originated, behind the circle in the center.
I have tried the following in the code attached to no avail including transform-origin: center but that has not worked. what I am missing?
/* ROTATE ANIMATION */
#-webkit-keyframes rotateIn {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(140deg);}
}
#-moz-keyframes rotateIn {
from {-moz-transform: rotate(0deg);}
to {-moz-transform: rotate(140deg);}
}
#keyframes rotateIn {
from {opacity: 0; transform: rotate(0deg);}
to {opacity: 0.5; transform: rotate(140deg);}
}
/* ANIMATE PETALS */
path[id^="petal"]{
opacity: 0;
-moz-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-moz-transform-origin: center;
-webkit-transform-origin: center;
transform-origin: center;
-webkit-animation:rotateIn ease-in 1;
-moz-animation:rotateIn ease-in 1;
animation:rotateIn ease-in 1;
-webkit-animation-fill-mode:forwards;
-moz-animation-fill-mode:forwards;
animation-fill-mode:forwards;
-webkit-animation-duration:0.5s;
-moz-animation-duration:0.5s;
animation-duration:0.5s;
}
#petal1 {
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
animation-delay: 0.8s;
}
#petal1 {
-webkit-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
animation-delay: 0.2s;
}
#petal2 {
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
animation-delay: 0.4s;
}
#petal3 {
-webkit-animation-delay: 0.6s;
-moz-animation-delay: 0.6s;
animation-delay: 0.6s;
}
#petal4 {
-webkit-animation-delay: 0.8s;
-moz-animation-delay: 0.8s;
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">
<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" transform="translate(-154 -131)" 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" transform="translate(-154 -131)" 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" transform="translate(-154 -131)" 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" transform="translate(-154 -131)" 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>

Answer 1

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