Как добавить анимацию масштабирования к элементу background-attachment:fixed? ⇐ CSS

[Anonymous]

Я пытаюсь создать элемент, который:

• имеет атрибут background-attachment: fix, поэтому при прокрутке он не прокручивается прокручивайте вместе с вами;
• имейте красивую масштабируемую анимацию, которая запускается один раз.

Моя проблема в том, что обе кажется, несовместимо.

• Когда я использую свойства Scale или Transform: Scale(...), Свойство background-attachment нарушается.
• Когда я использую свойства width и height, положение и размер объекта не изменяются. изображение, поэтому анимации нет, потому что изображение только обрезается.
• Я нашел много страниц, но не смог найти ничего, что могло бы помочь с этим в stackoverflow , за исключением пары вопросов, оставшихся без ответа.

Вот мой CSS-код (пример с «масштабом»):

Код: Выделить всё

main div.full-banner
{
position: relative;
width: 100%;
padding: var(--main-full-banner-padding);
box-sizing: border-box;
overflow: hidden;
box-shadow: 0px 0px var(--main-full-banner-shadow-size) var(--main-full-banner-shadow-color);
}

div.full-banner div.banner-background
{
position: absolute;
background-position: 50% 50%;
background-size: cover;
background-image: url('...');
top: -1%;
left: -1%;

width: 102%;
height: 102%;

padding: 0px;
margin: 0px;
animation: full-banner-zoom 60s ease-out;
}

@keyframes full-banner-zoom {
from {
scale: 120%;
}

to {
scale: 100%;
}
}

main div.full-banner div.banner-content
{
position: relative;
z-index: 2;
}

И есть пример того, как его использовать:

Код: Выделить всё

Hello world!
Lorem Ipsum Dolor Sit Amet

Как я могу разрешить фону одновременно иметь фоновое присоединение: исправлено и анимацию в его масштабе?

Подробнее здесь: https://stackoverflow.com/questions/790 ... ed-element