對CSS3動畫意外的行爲（變換：旋轉）

但是出現了一些問題：代替旋轉，元素正在移動，就好像我應用了「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/

注：我沒有使用前綴來簡化理解...

來源

2014-01-14 KeGaWeb

由於您的@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); 
    } 
}

來源

2014-01-14 14:35:32 412

謝謝！「從」工作得很好！ – KeGaWeb

但是如果我在JS部分有一個旋轉變換，問題仍然是一樣的。我發現的唯一選擇是在JS部分也生成關鍵幀，因此我可以在關鍵幀的「from」和「to」部分定義transform操作，並在「到部分。 – KeGaWeb

對CSS3動畫意外的行爲（變換：旋轉）

回答

相關問題