когда рендеринг CSS?

Question

Я думал об использовании CSS-перехода с задержкой в ​​качестве небольшого анимированного вступления для страницы на днях.Css отображается сразу после его загрузки (перед документом, если он полностью загружен / готов)?Если это так, я полагаю, я мог бы добавить тег <link> после того, как документ готов к аналогичному эффекту.

Answer 1

Насколько я могу судить по спецификациям и другим документам, переходы применяются немедленно при изменении вычисляемого значения:

Когда изменяется вычисляемое значение анимируемого свойства, реализации должны решить, чтопереходы к началу на основе значений свойств 'transition-свойства', 'transition-duration', 'transition-timer-function' и 'transition-delay' в тот момент, когда свойство animatable сначала получит новое вычисленное значение.

Отсюда

Так происходит с hover или focus или каким-либо другим событием.

Если вы хотите, чтобы ваш переход выполнялся при загрузке страницы, вам потребуется использовать некоторый JavaScript, как показано здесь: https://developer.mozilla.org/en/css/css_transitions#Using_transition_events_to_animate_an_object

Если вы беспокоитесь о том, что переход происходит слишком быстро, вы можетеустановить задержку в js.

Answer 2

Вкл. http://www.chapmansbuilding.co.uk/, Я добавил большой белый div с JS на весь контент, затем сделал анимацию, затем удалил div.Это означало, что я мог убедиться, что оставшееся содержимое было визуализировано и предварительно загружено и т. Д. Одновременно.

Убедитесь, что вы добавили его с JS, иначе сайт не будет виден для пользователя без JS, или если вашJS скрипт по какой-то причине не работает.