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

Question

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

Answer 1

您的CSS动画已准备好在您的javascript之前。我通常在身体上添加一个类，所以我知道它已准备好动画......

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

然后在你的CSS中

.box {
  /* usual styles here*/
}

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