我有一个SVG图形，应该可以做成一朵花，花瓣会淡入并按时间间隔旋转。发生的事情是，花瓣不会在花朵中间的圆心上旋转。启用动画效果时，花瓣向左移动，而不是在其起源处旋转和渐隐，而是在中心的圆圈后面。
我已经尝试了以下代码，但无济于事，包括transform-origin：center，但是没有用。我缺少什么？
/* 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: …