使用CSS（动画）旋转SVG

Question

使用CSS（动画）旋转SVG

16

我希望能够有一个使用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);
    }
}

- Bas van Rooten

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Karri Rasinmäki · Accepted Answer

这是您的原始动画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设置为
的中心50％50％，以使齿轮围绕自身滚动
将display设置为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);
    }
}

当然要添加正确的前缀。