Плавное скрытие прелодера

Question

На сайте есть прелоадер. Его скрытие запускается через 3 секунды после перехода на страницу. Подскажите, пожалуйста, как сделать это плавно (за 0,5 сек.) в правиле @keyframes ?

.preloader {
    animation-delay: 3s;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-name: fadeIn-preload;
}

@keyframes fadeIn-preload {
    from {
        visibility: visible;
    }
    to {
        visibility: hidden;
    }
}

Answer 1

У visibility нет промежуточных состояний, поэтому нет плавной анимации. Добавьте еще и изменение прозрачности opacity.

@keyframes fadeIn-preload {
    from {
        visibility: visible;
        opacity: 1;
    }
    to {
        visibility: hidden;
        opacity: 0;
    }
}

.preloader {
    animation-delay: 3s;
    animation-duration: 0.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-name: fadeIn-preload;
    
    min-width: 100px;
    min-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: tomato;
    color: #fff;
}

<div class="preloader">
  <p>Я — прелоадер</p>
</div>

БЛОГ НА HUSL

Плавное скрытие прелодера

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