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