CODEWITHSUNDEEP
csshtmlvectorsvg
Bas van Rooten
Bas van Rooten

Reputation: 193

Rotating a SVG with Css (Animation)

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

Upvotes: 18

Views: 55102

Answers (1)

Karri Rasinm&#228;ki
Karri Rasinm&#228;ki

Reputation: 1079

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.

Upvotes: 43

Related Questions