Html 使用 Css 旋转 SVG（动画）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17029384/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Rotating a SVG with Css (Animation)
提问by Bas van Rooten
I want to have a css-coded animated rotating svg image. I have no idea how to do that. At the end it has to look exactly like this: http://baveltje.com/logo/logo.html. I am completely new to css. The rotating svg's are gear1.svg and gear2.svg. I want them to rotate 360 degres for infinite time and I want to call them <.div class="gear1"> and gear2.. Is it possible to let it look exactly like the logo does in the link, but rotating?
我想要一个 css 编码的动画旋转 svg 图像。我不知道该怎么做。最后它必须看起来完全像这样：http: //baveltje.com/logo/logo.html。我对 css 完全陌生。旋转 svg 是 gear1.svg 和 gear2.svg。我希望它们无限旋转 360 度，我想称它们为 <.div class="gear1"> 和 gear2 .. 是否可以让它看起来与链接中的徽标完全一样，但是旋转？
I tried to use jsfiddle.net/gaby/9Ryvs/7/, but with no results. It has to go the same speed like that fiddle does!
我尝试使用jsfiddle.net/gaby/9Ryvs/7/，但没有结果。它的速度必须与小提琴一样！
Thanks in advance!
提前致谢！
Code:
代码：
div {
margin: 20px;
width: 100px;
height: 100px;
background: #f00;
-webkit-animation-name: spin;
-webkit-animation-duration: 4000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: spin;
-moz-animation-duration: 4000ms;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-name: spin;
-ms-animation-duration: 4000ms;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
animation-name: spin;
animation-duration: 4000ms;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
@-ms-keyframes spin {
from { -ms-transform: rotate(0deg); }
to { -ms-transform: rotate(360deg); }
}
@-moz-keyframes spin {
from { -moz-transform: rotate(0deg); }
to { -moz-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(360deg); }
}
@keyframes spin {
from {
transform:rotate(0deg);
}
to {
transform:rotate(360deg);
}
}
回答by Karri Rasinm?ki
Here is your original animation css (I have removed prefixes to keep it simple):
这是您的原始动画 css（为了简单起见，我已删除前缀）：
#gear{
animation-name: ckw;
animation-duration: 15.5s;
}
@keyframes ckw {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
In #gearyou should add:
在#gear 中，您应该添加：
- animation-iteration-countto infiniteto keep it rolling
- transform-originto center of your div 50% 50%to get gear rolling around itself
- displayto inline-block
- 动画迭代计数到无限以保持滚动
- 将原点变换到 div 的中心50% 50%以使齿轮围绕自身滚动
- 显示到内联块
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.
当然，添加正确的前缀。
