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％（或来自）和100％（或至）时间（即动画的开始和结束状态）的规则。 如果未同时指定这两个时间偏移，则关键帧声明无效并且不能用于动画。

包括from ，只是设置它的旋转参数为0 http://jsfiddle.net/5DjeR/5/

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