使用 Css 旋转 SVG（动画）答案

【问题标题】：Rotating a SVG with Css (Animation)使用 Css 旋转 SVG（动画）
【发布时间】：2018-01-22 07:47:01
【问题描述】：

我想要一个 css 编码的动画旋转 svg 图像。我不知道该怎么做。最后它必须看起来完全像这样：http://baveltje.com/logo/logo.html。我对 CSS 完全陌生。旋转的 svg 是 gear1.svg 和 gear2.svg。我希望它们无限旋转 360 度，我想将它们称为 <.div class="gear1"> 和 gear2.. 是否可以让它看起来与链接中的徽标完全一样，但旋转？

我尝试使用jsfiddle.net/gaby/9Ryvs/7/，但没有结果。它的速度必须和小提琴一样！

提前致谢！

代码：

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);
    }
}

【问题讨论】：

标签： css html vector svg

【解决方案1】：

这是你的原始动画 css（为了简单起见，我删除了前缀）：

#gear{
    animation-name: ckw;
    animation-duration: 15.5s;
}
@keyframes ckw {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

在#gear中你应该添加：

animation-iteration-count 到 infinite 以保持滚动
transform-origin 到 div 的中心 50% 50% 让齿轮自行滚动
显示到inline-block

结果：

#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);
    }
}

当然还要添加正确的前缀。

【讨论】：