CSS3 动画的意外行为（变换：旋转）

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%）才能使关键帧有效和使用。

为了使关键帧列表有效，它必须至少包含时间 0%（或 from）和 100%（或 to）（即动画的开始和结束状态）的规则。如果这两个时间偏移都没有指定，关键帧声明无效，不能用于动画。

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

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