文档准备好加载后，CSS3 关键帧动画是否开始？

Question

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

Answer 1

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

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

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