css - CSS3 动画仅在页面创建后开始

Question

我使用 CSS3 建立了一个包含大量动画的网站。动画元素的position属性都设置为absolute，容器的position设置为relative。每个元素最初都有一个top和left值（通过style属性设置），但是当页面加载时，所有元素最初都被动画到定义的位置top:0px;left:0px。有没有一种方法可以让页面从所需位置的元素开始，而无需它们最初被动画化？

Answer 1

你的 CSS 动画在你的 javascript 之前就已经准备好了。我通常在 body 中添加一个类，所以我知道它已经为动画做好了准备......

   window.onload = function(){
      document.body.className += " animated";
   }

然后在你的 CSS

.box {
  /* usual styles here*/
}

.animated .box {
  -prefix-animation: animationName duration ease; 
}