什么时候css渲染？

Question

我正在考虑使用带有延迟的css转换作为前几天的页面的小动画介绍。 css是否在加载后立即呈现（在文档完全加载/准备好之前）？如果是这样，我想我可以在文档准备好之后添加<link>标签以获得类似的效果。

Answer 1

在http://www.chapmansbuilding.co.uk/上，我在整个内容中添加了一个带有JS的大白色div，然后做了动画，然后删除了div。这意味着我可以确保同时呈现和预加载剩余内容等。

确保使用JS添加它，否则对于没有JS的用户，或者如果您的JS脚本由于某种原因失败，该站点将不可见。

Answer 2

据我从规范和其他文档中可以看出，当计算值发生变化时，会立即应用转换：

  

当计算出的值时   动画属性变化，   实现必须决定什么   转换开始基于   '过渡财产'的价值，   “过渡持续时间”，   'transition-timing-function'，和   '过渡延迟'属性   动画属性的时间   首先得到它的新计算值。

From here

所以这会发生在hover或focus或其他一些事件中。

如果您希望转换在页面加载时运行，则需要使用一些javascript，如下所示：https://developer.mozilla.org/en/css/css_transitions#Using_transition_events_to_animate_an_object

如果您担心转换发生得太快，可以在js中设置延迟。