overflow: hidden; в данном примере выступает в роли растягивания контейнера, то есть он занимает всю оставшийся ширину, ну гл. чтобы не был нарушен порядок. Очень хорошо, когда значения в % или динамические, то решает все проблемы) ну есть один минус.
Если вам нужно будет сделать какой то tooltip или что то выпадающее за пределы, вы не увидите, т.к элемент будет обрезан, я в таких случаях решал проблемы, добавлением элемента в DOM и ловил его через offset, вообщем если будут вопросы пишите, помогу, чем смогу.
Примерно суть понял, ну visibility, не отработает плавно, лучше воспользоваться opacity, либо скрывать элемент за пределами сцены, чтобы он либо вываливался сверху, либо откуда еще, ну 1 вопрос, я не понимаю, зачем вам скрол) если вы хотите, чтобы анимация сразу же начала проигрываться, после загрузки страницы. По поводу задержки есть 2 ф-ции, 1 вызывается 1 раз, setTimeout, 2 вызывается каждый через каждый заданный интервал, пока ее не остановить, если правильно понял вас, то скрол тут не нужен, и подойдет использование setTimeout с задержкой.
А вообще если нужна анимация на CSS, то можно все задержки сделать там, просто чтобы например начлаа играть анимация, добавлять класс body, или родительскому контейнер, сразу после загрузки страницы. Вот набросал простой пример, так вы хотели? codepen.io/Mike0609/pen/GpMQgm
Александр Тягунов: нет! Я на самом деле не очень понял, что вы хотите, если вы попробуете объяснить я смогу легко помочь, ваш код отрабатывает только когда вы начинаете скролить, т.к вы исп. метод window.scroll(), чтобы код сработал сразу, его нужно выполнять до этого метода, а уже в нем проверять, при каких условиях, и что должно работать, хорошим примером тому является: getbootstrap.com/components, где у них при скроле выделяется нужный раздел