Skrócenie kodu CSS

Question

Witam.

Mam kod który wydaje się mi nadmiarowy, ale nieużywam jeszcze żadnego preprocesora css, żeby go skrócić.

Mam wyskakujący div z przyciskiem, po naciśnięciu przycisku div się chowa, tło się przesuwa i wyskakuje nowy div z nowym przyciskiem. 

.movie-bg1 {
    animation-duration: 4s;
    animation-name: zoom-out;
    animation-fill-mode: forwards;
}
@keyframes zoom-out {
    from {background-size: 250% 250%;}
    50% {background-size: 100% 100%;}
    66% {background-size: 100% 100%;}
    to  {background-size: 250% 250%;
        background-position: 85% 0;}
}

Czy muszę powtórzyć ten kod 6 razy (tyle mam divów), aby tylko zmienić background-position (dla każdego diva inny)?

Comments

Pokaż co masz, HTML + CSS, najlepiej z tym kodem powtórzonym 6x - z miejsca ktoś Ci wtedy powie czy da się to skrócić.

---

HTML:

<section class="row how-working" id="bg-city">

                <div id="window-one" class="window-one item windows">
                     <button  id="btn-bg1" aria-label="Następny przykładowy post"><span> > </span></button>
                </div>

            <div id="window-two">
                <button  id="btn-bg2" aria-label="Następny przykładowy post"><span> > </span></button>
            </div>

            <div id="window-tree">         
                <button  id="btn-bg3" aria-label="Następny przykładowy post"><span> > </span></button>
            </div>

            <div id="window-four">
                <button  id="btn-bg4" aria-label="Następny przykładowy post"><span> > </span></button>
            </div>

            <div id="window-five">          
                <button  id="btn-bg5" aria-label="Następny przykładowy post"><span> > </span></button>
            </div>
</section>

CSS:

.movie-bg1, .movie-bg2, .movie-bg3, .movie-bg4, .movie-bg5 {
    animation-duration: 4s;
    animation-fill-mode: forwards;
}

.movie-bg1 {
    animation-name: zoom-out;
}
@keyframes zoom-out {
    from {background-size: 250% 250%;
          background-position: 0 0}
    50% {background-size: 100% 100%;}
    66% {background-size: 100% 100%;}
    to  {background-size: 250% 250%;
        background-position: 85% 0;}
}
.movie-bg2 {
    animation-name: zoom-out2;
}
@keyframes zoom-out2 {
    from {background-size: 250% 250%;
        background-position: 85% 0;}
    50% {background-size: 100% 100%;}
    66% {background-size: 100% 100%;}
    to  {background-size: 250% 250%;
        background-position: 80% 60%;}
}
.movie-bg3 {
    animation-name: zoom-out3;
}
@keyframes zoom-out3 {
    from {background-size: 250% 250%;
        background-position: 80% 60%;}
    50% {background-size: 100% 100%;}
    66% {background-size: 100% 100%;}
    to  {background-size: 250% 250%;
        background-position: 100% 100%;}
}
.movie-bg4 {
    animation-name: zoom-out4;
}
@keyframes zoom-out4 {
    from {background-size: 250% 250%;
        background-position: 100% 100%;}
    50% {background-size: 100% 100%;}
    66% {background-size: 100% 100%;}
    to  {background-size: 250% 250%;
        background-position: 10% 30%;}
}
.movie-bg5 {
    animation-name: zoom-out5;
}
@keyframes zoom-out5 {
    from {background-size: 250% 250%;
        background-position: 10% 30%;}
    50% {background-size: 100% 100%;}
    66% {background-size: 100% 100%;}
    to  {background-size: 250% 250%;
        background-position: 0 0;}
}

 

JS:

<script>
    document.getElementById('btn-bg1').addEventListener('click', function(){
        document.getElementById('bg-city').classList.add('movie-bg1');
        document.getElementById('window-one').classList.add('hiding');
        document.getElementById('window-two').classList.add('showing');
    });
    document.getElementById('btn-bg2').addEventListener('click', function(){
        document.getElementById('bg-city').classList.add('movie-bg2');
        document.getElementById('window-two').classList.remove('showing');
        document.getElementById('window-two').classList.add('hiding');
        document.getElementById('window-tree').classList.add('showing');
    });
    document.getElementById('btn-bg3').addEventListener('click', function(){
        document.getElementById('bg-city').classList.add('movie-bg3');
        document.getElementById('window-tree').classList.remove('showing');
        document.getElementById('window-tree').classList.add('hiding');
        document.getElementById('window-four').classList.add('showing');
    });
    document.getElementById('btn-bg4').addEventListener('click', function(){
        document.getElementById('bg-city').classList.add('movie-bg4');
        document.getElementById('window-four').classList.remove('showing');
        document.getElementById('window-four').classList.add('hiding');
        document.getElementById('window-five').classList.add('showing');
    });
    document.getElementById('btn-bg5').addEventListener('click', function(){
        document.getElementById('bg-city').classList.add('movie-bg5');
        document.getElementById('window-five').classList.remove('showing');
        document.getElementById('window-five').classList.add('hiding');
        document.getElementById('window-one').classList.add('showing');
    });
</script>

 

---

Jeszcze jedno pytanie. Gdy cały cykl się wykona i wróci do window-one, animacja nie chce się ponownie uruchomić. Dlaczego?

---

Już wiem dlaczego. Nie pousuwałem klas movie-bg z bg-city.