css - CSS3 动画的意外行为(转换 : rotate)

Question

我正在尝试做一个简单的动画:让一些元素旋转。

但有些地方不对劲:元素没有旋转，而是在移动，就好像我应用了“translateX”变换函数一样。

我认为问题的发生是因为我在 JS 部分应用了转换函数。但是我找不到合适的解决方案(我不想手动创建每个元素)。

JS部分:

$container = document.getElementById('container');
$block = document.createElement('div');
$block.className = 'block';
for(var i = 0; i < 3; i++){
    $blockactu = $block.cloneNode(true);
    $blockactu.style.transform = 'translateX('+100*i+'px)';
    $container.appendChild($blockactu);
}

CSS 部分:

@keyframes spin-reverse{
   to {
      transform: rotate(-360deg);
   }
}
.block{
   background-color:orange;
   width:50px;
   height:50px;
   border-radius: 20px 20px 20px 20px;
   position: absolute;
   left: 175px;
   top: 200px;
   z-index:1;
   transform-origin: top;
   animation: spin-reverse linear 40s infinite;
}

这是一个例子:http://jsfiddle.net/5DjeR/3/

注意:我没有使用前缀来简化理解......

Answer 1

由于您的 @keyframe 规则，元素不会旋转。根据MDN您需要一个 from 和 to 选择器(或 0% 和 100%)以便关键帧有效并已使用。

In order for a keyframe list to be valid, it must include rules for at least the times 0% (or from) and 100% (or to) (that is, the starting and ending states of the animation). If both of these time offsets aren't specified, the keyframe declaration is invalid and can't be used for animation.

包含 from 并将其旋转参数设置为 0。http://jsfiddle.net/5DjeR/5/

@keyframes spin-reverse {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}