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规则，元素无法轮播。根据{{3}}，您需要一个from和to选择器（或0%和100%）才能使关键帧有效且＆amp;使用

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

包括from，只需将其旋转参数设置为0. MDN

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

CSS3动画上出现意外行为（transform：rotate）

1 个答案: