How to control css3 animation rotate direction

animation css transform rotation direction
hh54188 picture hh54188 · May 6, 2012 · Viewed 9.1k times · Source

I want rotate a element with css3 animation and transform property,which from 20 degree to -20 degree

@-moz-keyframes oneRotate{
    0%{
        -moz-transform: rotate(20deg);
    }
    100%{
        -moz-transform:rotate(-20deg);
    }
}

.oneRotate
{
    -moz-transform-style: preserve-3d;

   -moz-animation-name:oneRotate;
   -moz-animation-duration:2s;
   -moz-animation-timing-function:ease-in-out;
   -moz-animation-delay:0s;
   -moz-animation-iteration-count:infinite;
   -moz-animation-direction:normal;
}

the rotate order is 20 -> 0 -> -20... is anti-clockwise

but I want the order is 20 -> 90 -> 180 -> ...is clockwise

what can I do to achieve that?

Answer

Venge picture Venge · May 6, 2012

Set the 100% rotation angle to 340 degrees. It's the same angle as -20 degrees since -20 + 360 = 340, but it'll rotate in the opposite direction since 340 > 20 but -20 < 20.

Related questions

CSS3 Continuous Rotate Animation (Just like a loading sundial)

I am trying to replicate an Apple style activity indicator (sundial loading icon) by using a PNG and CSS3 animation. I have the image rotating and doing it continuously, but there seems to be a delay after the animation has …

Read More
CSS3 Rotate Animation

<img class="image" src="" alt="" width="120" height="120"> Cannot get this animated image to work, it is supposed to do a 360 degrees rotation. I guess something's wrong with the CSS below, as it just stays still. .image { float: left; …

Read More
How to have multiple CSS transitions on an element?

It's a pretty straightforward question but I can't find very good documentation on the CSS transition properties. Here is the CSS snippet: .nav a { text-transform:uppercase; text-decoration:none; color:#d3d3d3; line-height:1.5 em; font-size:.8em; display:block; text-align:center; …

Read More