Css動畫無法使用變換

-1

由於Chrome的某些原因，我創建的動畫會先移到左邊，然後移動到所需的位置。Css動畫無法使用變換

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

的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/

來源

2015-11-03 Jamie Hutber

任何機會就微乎其微演示下降到只有相關的代碼....有一個** **很多對那裏發生的。不速之客，我想你已經改變了彼此之間的重疊。 –

有超過1,100行的CSS，我懷疑有人會通過篩選來試圖找到你的問題。嘗試縮小到動畫的哪部分不起作用。 – CodingWithSpike