如何控制css3动画的旋转方向

Question

我希望用css3动画旋转一个元素并转换属性，从20度到-20度

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

旋转顺序为20 - > 0 - ＆gt; -20 ...是逆时针的

但我希望订单是20 - ＆gt; 90 - ＆gt; 180 - ＆gt; ......顺时针

我能做些什么来实现这个目标？

Answer 1

将100％旋转角度设置为340度。它是与-20度相同的角度，因为-20 + 360 = 340，但是它将以相反的方向旋转，因为340＆gt; 20但是-20 < 20。