Css動畫無法使用變換

Question

由於Chrome的某些原因，我創建的動畫會先移到左邊，然後移動到所需的位置。

它應該只是移動到右側和頂部。

的CSS

.intro .cogFade .cog { 
    position: absolute; 
} 

.cog.large { 
    animation-name: cog-large; 
} 

@-webkit-keyframes cog-large { 
    100% { 
    position: absolute; 
    left: 50%; 
    top: 40%; 
    transform: translate(-50%, -40%) scale(1, 1); 
    } 
} 

的Html

<div class="intro"> 
     <div class="cogFade"> 
      <div class="cogElements" style="margin-top: 194px;"> 
       <div class="circle zoomout" style="margin-top: 194px;"></div> 
       <div style="font-size: 5rem;" class="cog large"> 
        <i class="icon-cog spinning"></i> 
       </div> 
      </div> 
     </div> 
     <div style="font-size: 15rem; display: none;" class="b breathing"> 
       <i class="icon-dotb"></i> 
     </div> 
</div> 

請在這裏看到動畫的運動： http://jsfiddle.net/hutber/fejpm491/1/

Answer 1

我把你貼的代碼到的jsfiddle，作爲一個與你聯繫太大而無法使用。

首先，-webkit-前綴不再需要用於Chrome中的動畫。

你的問題是position，left和top沒有合適的初始值，導致實際上沒有完全定義的動畫。正如您可能已經注意到的那樣，瀏覽器在這種情況下行爲不同，因爲Chrome和Firefox中的動畫看起來不同。

只需確保position: absolute總是獨立於動畫，然後爲left和top設置合適的開始和結束值。

Example based on your code