【问题标题】：CSS3 Animations to only start after the page has been createdCSS3 动画仅在页面创建后开始
【发布时间】：2013-05-20 10:43:26
【问题描述】：
我使用 CSS3 构建了一个包含大量动画的网站。动画元素都将position 属性设置为absolute，并将容器的position 设置为relative。每个元素最初都有一个top 和left 值（通过style 属性设置），但是当页面加载时，所有元素最初都动画到top:0px;left:0px 定义的位置。有没有一种方法可以让页面从所需位置的元素开始，而无需最初对其进行动画处理？
【问题讨论】：
标签：
css
css-transitions
css-animations
【解决方案1】：
您的 CSS 动画在您的 javascript 之前就已准备就绪。我通常会在 body 中添加一个类，这样我就知道它已经为动画做好了准备......
window.onload = function(){
document.body.className += " animated";
}
然后在你的 CSS 中
.box {
/* usual styles here*/
}
.animated .box {
-prefix-animation: animationName duration ease;
}