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中的动画不再需要var dicts: [[String:AnyObject]] = [] for document in conferences.allDocuments { if let fields = document.fields as? [String:AnyObject] { dicts.append(fields) } }前缀。

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

确保top始终为真，与动画无关，然后为position: absolute和left设置正确的开始和结束值。

Example based on your code

Css动画不适用于变换

1 个答案: