使用Css旋转SVG(动画)

Question

我想要一个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);
    }
}

Answer 1

这是你的原始动画css(我删除了前缀以保持简单):

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

在#gear中你应该添加:

• 动画迭代计数到无限以保持滚动
• 变换原点到你的div的中心 50%50%让齿轮绕着自己滚动
• 显示到内联块

结果:

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

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