如何控制css3动画旋转方向

Question

我想用css3动画和transform属性旋转一个元素，从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 -> -20... 逆时针

但我想要的顺序是 20 -> 90 -> 180 -> ...是顺时针

我可以做什么来实现这一目标？

Answer 1

将 100% 旋转角度设置为 340 度。由于 -20 + 360 = 340，它与 -20 度的角度相同，但它会沿相反方向旋转，因为 340 > 20 但 -20 < 20。