CODEWITHSUNDEEP
htmlcss
gkrls
gkrls

Reputation: 2664

css rotation using webkit-animation

I am trying to get a rotation effect with:

#outer {
    position:relative;
    width:50%;
    left:0.3%;
    top:0.2%;
    -webkit-animation: rotation 30s infinite linear;
}
@-webkit-keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}

But it wobbles. I'm not sure if it's a CSS issue of just the outer ring isn't a "perfect" circle. Why does it do this?

Outer circle:

You can see a demo here.

Upvotes: 1

Views: 1454

Answers (4)

bjb568
bjb568

Reputation: 11488

The reason it appears to bob up and down is because your image is lopsided. You can test it with this.

<div></div>
<img src="http://i.imgur.com/LbXvgbp.png" width="400" />
<style>
    * { position: absolute }
    div {
        width: 400px;
        height: 400px;
        border-radius: 50%;
        background: #000;
    }
</style>

It appears to be elliptical - more wide than tall.

Upvotes: 2

Jason Clark
Jason Clark

Reputation: 59

The @keyframes rule is supported in Internet Explorer 10, Firefox, and Opera.

Safari and Chrome support an alternative, the @-webkit-keyframes rule.

Note: The @keyframes rule is not supported in Internet Explorer 9 and earlier versions.

You should provide rules with and without the -webkit- to support all the current browsers.

@keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to   {-webkit-transform: rotate(359deg);}

@-webkit-keyframes rotation {
from {-webkit-transform: rotate(0deg);}
to   {-webkit-transform: rotate(359deg);}

W3Schools

Upvotes: 0

Matt Smith
Matt Smith

Reputation: 2120

You have -webkit- prefixes for animation and keyframes but for other browsers you need the non-prefixed properties, too (-moz- and -ms- aren't needed for these):

#outer {
  -webkit-animation: rotation 30s infinite linear;
  animation: rotation 30s infinite linear;
}
@-webkit-keyframes rotation {
  from {-webkit-transform: rotate(0deg);}
  to   {-webkit-transform: rotate(359deg);}
}
@keyframes rotation {
  from { transform: rotate(0deg); }
  to   { transform: rotate(359deg); }
}

Upvotes: 1

Shan Robertson
Shan Robertson

Reputation: 2742

works for me... what browser are you using? If it's not webkit you won't see anything without providing the proper vendor prefixes. This is how i usually write transforms

-webkit-transform:;
-moz-transform:;
-ms-transform:;
transform:;

Upvotes: 0

Related Questions