Почему мое фоновое изображение исчезает, когда я фиксирую его положение?

Question

Хорошо, моя цель - анимировать фоновое изображение, при этом оно будет скользить снизу вверх при загрузке страницы, а после завершения анимации установить его положение на фиксированное. Насколько я могу судить, код, который я написал, должен работать отлично (хотя я довольно новичок), но когда анимация заканчивается и javascript добавляет свойство position к фоновому изображению, оно полностью исчезает, и все, что ниже него поднимается, чтобы занять его место. Кто-нибудь может сказать мне, что не так с моим кодом?

HTML:

<div style="background-image: url(/resources/css/img/Logo\ Cropped.jpg);" class="background__img--hero"></div>` (set inside the header)

CSS:

@keyframes slideUp {
    from {
        margin-top: 700px;
    }
    to {
        margin-top: 0px;
    }
}

.background__img--hero {
    background-size: cover;
    background-position: center;
    height: 100vh;
    animation: slideUp 2s ease-out;
}

Javascript:

document.querySelector('.background__img--hero').addEventListener('animationend', posFix);

function posFix() { document.querySelector('.background__img--hero').style.position = 'fixed'; };

Answer 1

В вашем .background__img - hero просто добавьте эти:

.background__img--hero {
    background-size: cover;
    background-position: center;
    height: 100vh;
    width: 100%;
    animation: slideUp 2s 1 ease-out forwards;
}

или любую ширину, которую вы хотите, чтобы ваше изображение имело

Answer 2

Чтобы анимировать позицию элемента position:fixed, не анимируйте поля , а анимируйте саму позицию (в этом cas top), например

@keyframes slideUp {
    from {
        top: 700px;
    }
    to {
        top: 0px;
    }
}