html - 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 中，因为您链接的代码太大而无法使用。

首先，Chrome 中的动画不再需要 -webkit- 前缀。

您的问题是 position、left 和 top 没有正确的初始值，导致实际上没有完全定义的动画.您可能已经注意到，在这种情况下浏览器的行为有所不同，因为动画在 Chrome 和 Firefox 中看起来不同。

只需确保 position: absolute 始终独立于动画，然后为 left 和 top 设置正确的开始和结束值.

Example based on your code