CSS3 动画仅在页面创建后启动

Question

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

Answer 1

您的 CSS 动画在您的 javascript 之前准备就绪。我通常会向主体添加一个类，这样我就知道它已准备好用于动画...

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

然后在你的 CSS 中

.box {
  /* usual styles here*/
}

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