animation - 如何控制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 -> -20... 是逆时针的

但我希望顺序是 20 -> 90 -> 180 -> ...顺时针

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

Answer 1

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