Дмитрий Кравченко

Вставьте iframe, так и сделано у Hawk-ов, можете убедиться, нажав F12

CSS анимацией

@keyframes progress{
from{
width: 0;
}
to{
width: 100%;
}
}
.progressbar:after{
content: '';
position: absolute;
height: 100%;
animation: progress 60s linear forwards;
}

Убрать его можно второй анимацей на самом элементе

@keyframes hide{
from{
opacity: 1;
}
to{
opacity: 0;
}
}
.progressbar{
animation: hide 100ms 60s ease-in-out;
}

потому что кто-то редактировал бутстрап, судя по всему

.row {
    margin-right: -15px;
    margin-left: -65px;
    width: 900px;
}

тогда как должно быть

.row {
    margin-right: -15px;
    margin-left: -15px;
}

user-select: none;

ключевое слово forwards не даст ему появиться на прежнем месте

.el{
  animation: cloud1 1s ease-in-out forwards;
}

если нужно именно opacity, можно написать

@keyframes cloud1 {
    0% {
     left: 500px;
     opacity: 1;
    }
    99%{
     opacity: 1;
    }
    100% {       
     left:-200px;
     opacity: 0;
    }
}

можно принудительно поставить

body{
  overflow-y: scroll;
}

browsersync лучший
если хочется принудительного обонвления страницы, в опциях ставим injectChanges в false

Зависит от того, что вызывает изменение размеров. Если это брейкпоинт в медиа запросах, напишите соответствующие правила анимации для нужных элементов, если это вызывается работой скриптов - зависит от логики, можно, допустим, проверять размеры, и при достижении нужной величины добавлять какой-то класс на элемент, к которому привязать необходимые анимации.
Если этого недостаточно, опишите ситуацию подробней.

это обычная png картинка, сверху которой положен слой свг, в котором отлавливается hover и производится вся "магия"