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; 
}