Animacje CSS na scoll do elementu płynne przewijanie

// Nadaj klase na scoll to do animacji elementów

function odslonElementy() {
    var odslaniane = document.querySelectorAll(".animowane");

    for (var i = 0; i < odslaniane.length; i++) {
        var windowHeight = window.innerHeight;
        var elementTop = odslaniane[i].getBoundingClientRect().top;
        var elementVisible = 150;

        if (elementTop < windowHeight - elementVisible) {
            odslaniane[i].classList.add("anim-ctive");
        } else {
            odslaniane[i].classList.remove("anim-active");
        }
    }
}

window.addEventListener("scroll", odslonElementy);

przykladowe css:

/****************  animka fotek ****************/


@keyframes wjazdfoty {
    
  0% {transform: scale(1.5); opacity: 0;}
  100% {transform: scale(1); opacity: 1;}
}

/* obrazki w tresci*/


.obrazek-w-tresci img {
    border-radius: 15px;
    box-shadow: #0000006b 4px 7px 4px;

    /* na start animacji*/

    opacity: 0; /*- stan początkowy okryte*/


}

.obrazek-w-tresci.anim-ctive img{
    animation: wjazdfoty 0.4s ease-out;
    animation-fill-mode: forwards; /*parametr forwads istotny by animacja zatrzymała się na ostatniej klatce*/
}