用Css旋转SVG（动画） [英] Rotating a SVG with Css (Animation)

问题描述

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

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

预先感谢！

p>

  div {
 margin：20px; 
 width：100px; 
 height：100px; 
背景：＃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; 
动画持续时间：4000ms; 
 animation-iteration-count：infinite; 
 animation-timing-function：linear; 
} 
 @ -ms-keyframes spin {
 from {-ms-transform：rotate（0deg）; } 
到{-ms-transform：rotate（360deg）; } {
} 
 @ -moz-keyframes旋转{$ b $ {from {-moz-transform：rotate（0deg）; } 
到{-moz-transform：rotate（360deg）; } {
} 
 @ -webkit-keyframes旋转{$ b $ {from {-webkit-transform：rotate（0deg）; } 
到{-webkit-transform：rotate（360deg）; } 
} 
 @keyframes spin {
 from {
 transform：rotate（0deg）; 
} 
到{
 transform：rotate（360deg）; 
 
 
 
 $ div $解析方案

是你原来的动画CSS（我已经删除了前缀以保持简单）：

  #gear {
 animation-name ：ckw; 
动画持续时间：15.5s; 
} 
 @keyframes ckw {
 0％{
 transform：rotate（0deg）; 
} 
 100％{
 transform：rotate（360deg）; 
 
 
  

在 #gear em> ，您应该添加： >到 无限 以保持滚动到


转换原始 您的div中心 50％50％ 即可让齿轮自行滚动

inline-block

结果：

  #gear {
 animation-name：ckw; 
动画持续时间：15.5s; 
 / *添加的东西* / 
 animation-iteration-count：infinite; 
 transform-origin：50％50％; 
 display：inline-block; 
 / * < -  * / 
} 
 @keyframes ckw {
 0％{
 transform：rotate（0deg）; 
} 
 100％{
 transform：rotate（360deg）; 
} 
} 
  

当然要加上正确的前缀。

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?

I tried to use jsfiddle.net/gaby/9Ryvs/7/, but with no results. It has to go the same speed like that fiddle does!

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

解决方案

Here is your original animation css (I have removed prefixes to keep it simple):

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

In #gear you should add:

• animation-iteration-count to infinite to keep it rolling
• transform-origin to center of your div 50% 50% to get gear rolling around itself
• display to inline-block

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.

这篇关于用Css旋转SVG（动画）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！