时间戳

首页 > 解决方案 > SVG 动画，CSS 旋转动画，但保持在同一个地方

css - SVG 动画，CSS 旋转动画，但保持在同一个地方

问题描述

我在我的网站上为螺旋桨制作动画。
http://bug.soulmates.company（参见第 3 节）
但即使我将样式设置为： 

.propeller_spin {
   animation-name: spin;
   animation-duration: 4000ms;
   animation-iteration-count: infinite;
   transform-origin: center center;
 }

 @keyframes spin {
   from {
     transform:rotate(0deg);
     transform-origin: center center;
   }
   to {
     transform:rotate(360deg);
     transform-origin: center center;
   }
 }

螺旋桨在旋转时不会停留在原位。

标签： cssanimationsvg

解决方案

DOM 元素从它们自己的左上角测量 transform-origin，但 SVG 测量的是相对于父 SVG 画布的 transform-origin。

您可以在 .propeller_spin 类上使用 transform-b​​ox: fill-box。

transform-b​​ox CSS 属性定义了与 transform 和 transform-origin 属性相关的布局框。

推荐阅读