Question

我遇到了CSS动画的问题：

.windmill {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    transform-origin: center center;
    -webkit-animation:spin 4s linear infinite;
    -moz-animation:spin 4s linear infinite;
    animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

                            <svg viewBox="0 0 60 55" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
                                <g id="base"">
                                    <polyline id="body" fill="black" points="15.039,30.666 15.383,14 16.639,14 16.98,30.666"/>
                                </g>
                                    <g class="windmill">
                                        <polyline id="wing_x5F_top" fill="black" points="15.811,0.213 15.161,10.06 15.452,12.378 16.208,12.382 16.839,10.034 16.143,0.215"/>
                                        <polyline id="wing_x5F_left" fill="black" points="27.41,19.574 19.182,14.129 17.023,13.232 16.646,13.886 18.372,15.598 27.244,19.861"/>
                                        <polyline id="wing_x5F_right" fill="black" points="4.645,19.402 12.873,13.957 15.031,13.06 15.409,13.714 13.683,15.426 4.811,19.689"/>
                                        <circle id="motor" fill="#333333" stroke="#E6E6E6" stroke-width="0.25" stroke-miterlimit="10" cx="15.976" cy="13.232" r="1.15"/>
                                    </g>
                                </svg>

请帮助我，我需要居中动画，并确保它不是双重旋转.. 谢谢！

Answer 1

似乎浏览器错误地计算了宽度和高度。虽然我认为JavaScript是可选的，但它通常会有不支持硬件加速的缺点。这在增加转速时非常明显。由于缺少透明度，定位，失去响应能力，jpg版本可能很难实现......

我通过添加带有转子叶片大小的隐藏圆圈到正在动画的组中找到了一种解决方法。

.windmill {
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform-origin: center center;
    -webkit-animation: clockwise 1s infinite linear;
    -moz-animation: clockwise 1s infinite linear;
    animation: clockwise 1s infinite linear;
}
@-moz-keyframes clockwise {
    0% {
        -moz-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
    }
}
@keyframes clockwise {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

<svg viewBox="0 0 40 55" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg">
    <polyline id="body " points="15.039,30.666 15.383,14 16.639,14 16.98,30.666 " transform="matrix(1.2953083,0,0,1.2953083,-4.694094,-0.881751)" style="fill:#000000" />
    <g class="windmill">
        <circle r="16" cy="16" cx="16" id="ellipse4307" style="fill:#000000;fill-opacity:0;stroke:none;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none" />
        <path style="fill:#ae0000;fill-opacity:1;stroke:none;stroke-width:0;stroke-miterlimit:4;stroke-dasharray:none" d="m 15.99036,0.001184 a 16,16.11449 0 0 0 -0.293467,0.0101 l -0.341537,12.264949 0.635004,3.923873 -0.0026,0.04048 0.0051,-0.01771 0.0026,-0.02025 0.637535,-3.923873 -0.344066,-12.26242 a 16,16.11449 0 0 0 -0.28841,-0.01518 l -0.0051,0 -0.0051,0 z m -0.0026,16.239421 -0.01771,0.0101 -3.653175,1.399035 -10.2132018,6.413292 a 16,16.11449 0 0 0 0.298528,0.523689 l 10.5522088,-5.808647 3.01817,-2.519779 0.02025,-0.01269 -0.0026,-0.0026 0.0051,-0.005 0.0076,-0.0076 -0.01518,0.0101 z m 0.0051,0.0051 0.03289,0.02025 3.01817,2.52231 10.542089,5.801057 a 16,16.11449 0 0 0 0.313706,-0.516098 l -10.218303,-6.413293 -3.650643,-1.401564 -0.02782,-0.02025 -0.0026,0.0026 0.0101,0.01269 -0.01518,-0.0101 -0.0026,0.0026 z" id="path4286" inkscape:connector-curvature="0" />
    </g>
    <circle style="fill:#333333;stroke:#e6e6e6;stroke-width:1.29530823;stroke-miterlimit:10" r="1.4896045" cy="16.114491" cx="16" stroke-miterlimit="10 " id="motor " />
</svg>

Answer 2

在不同的浏览器上支持SVG转换的方式完全不同。 IE和Opera根本不支持它们。 Firefox确实如此，但没有相对价值（就像你的情况一样）。

所以现在你有三个选择：

第一种方法是将图形更改为.jpg，然后everthing应该可以正常工作。但是你可能有一些不好的论据，所以这里有其他解决方案：
如果您想坚持.svg，您可以直接在.svg文件中构建动画（然后您不必使用CSS进行动画制作）。它不应该那么难，因为互联网上有很多教程。
最后一个解决方案是使用JavaScript。请参阅this article，其中解释了整个问题。本文使用GSAP库和以下代码来解决方案：
```
TweenMax.to("#svg, #div", 2, {
    rotation:360, 
    transformOrigin:"50% 50%"
});
```

因此，作为结论：使用纯CSS执行此操作可能是不可能的。即使您在浏览器中使用它，其他人也可能无法正确显示它。

在CSS中设置旋转点和中心动画

2 个答案: