How can I add a scale animation to a background-attachment:fixed element?

I am trying to make an element that :

• has the background-attachment: fixed attribute, so when you scroll it does not scroll with you ;
• have a beautifull scale-out animation that runs once.

My problem is that both does not seem to be compatible.

1. When I use the scale or transform: scale(...) properties, the background-attachment property gets broken.
2. When I use the width and height properties, it does not seem to change the position and size of the image, so there is not any animation, because the image gets only cropped.
3. I’ve found for a lot of pages, but I couldn’t find any dealing with that on stackoverflow, except some couples of unanswered questions.

There is my css code (exemple with “scale”):

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;
}

And there is an example of how to use it :

<div class='full-banner'>
    <div class='banner-background'>
    </div>
    <div class='banner-content'>
        <h2>Hello world!</h2>
        <p>Lorem Ipsum Dolor Sit Amet</p>
    </div>
</div>

How can I allow the background to at the same time have background-attachment: fixed and a animation on its scale?