Css3 关键帧动画是否在文档准备好加载后开始？答案

【问题标题】：Does Css3 keyframe animations start after document is ready loaded?Css3 关键帧动画是否在文档准备好加载后开始？
【发布时间】：2013-06-24 01:35:33
【问题描述】：

Css3 关键帧动画是否在文档中的每个元素加载后开始？这是一个至关重要的问题，因为如果动画在整个页面正确加载之前开始，这将是一个问题。

【问题讨论】：

【解决方案1】：

当显示属性从无变为可见时也是如此。 Sample Code

function showDiv() {

document.getElementById("myDiv").style.display="block"; }

【讨论】：

【解决方案2】：

只要 CSS 规则可用（从外部样式表加载或在页面上的 <style> 块中找到）并且页面上有匹配选择器的元素，动画就会开始。 “等待页面加载”不能仅使用 CSS 完成。您应该使用 JavaScript 来检测 document 加载事件 - 然后将包含动画的类附加到适当的元素。

使用 jQuery 的示例（也可以使用纯 JS 完成）：

<script>
    $(document).ready(function(){
        $('#elementToAnimate').addClass('myAnimationClass');
    });
</script>

【讨论】：