Плавное разворачивание блока сверху вниз

Question

Люди нужна помощь скорее всего подобные вопросы здесь задавались, но все же нужно сделать плавное разворачивание сверху вниз блока при загрузке страницы.

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

.info{
    width: 100%;
    height: 80px;
    background-color: #00004d;
    border-top: 5px ridge Crimson;
    transform: translateY(-80px);
    transition: all .3s ease-in-out;
}

.info:hover{
    transform: translateY(0px);
}

    <div class="info">
        
    </div>

Answer 1

Обновил ответ. Добавил вариант на чистом CSS :)

Решение на JS:

найдите нужный элемент
При срабатывании события лоад, задайте стиль найденному элементу.

let info = document.querySelector('.info');
window.onload =  slow();

 function slow(){
setTimeout(function(){ 
info.style.transform = 'translateY(0px)'
}, 1000);

}

.info{
    width: 100%;
    height: 80px;
    background-color: #00004d;
    border-top: 5px ridge Crimson;
    transform: translateY(-80px);
    transition: all .3s ease-in-out;
}

 <div class="info">
        
    </div>

Решение на CSS

.info{
    width: 100%;
    height: 80px;
    background-color: #00004d;
    border-top: 5px ridge Crimson;
    animation: example 1s ease-in-out;
}

@keyframes example {
  0% {transform: translateY(-80px)}
  100% {transform: translateY(0)}
  
}

 <div class="info">
        
    </div>

БЛОГ НА HUSL

Плавное разворачивание блока сверху вниз

Ответы (1 шт):