Css 动画不适用于变换答案

【问题标题】：Css animation doesn't work with transformCss 动画不适用于变换
【发布时间】：2015-11-04 00:06:26
【问题描述】：

由于某种原因，在 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/

【问题讨论】：

任何机会你都可以将演示精简为相关代码......那里有一个很多。顺便说一句，我猜你有相互覆盖的变换。
拥有超过 1,100 行的 CSS，我怀疑是否有人会筛选它以试图找到您的问题。尝试将范围缩小到动画的哪些部分不起作用。

标签： html css animation

【解决方案1】：

我将您发布的代码放入 JSFiddle 中，因为您链接的代码太大而无法使用。

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

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

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

Example based on your code

【讨论】：

谢谢 Cedric :) 你非常乐于助人，值得我点赞 :)