Apply correct CSS Animation to HTML ID element

I am trying to add an animation in ID “Rangasala” of the following HTML Code:

  <section id="showcase">
        <div class="container">
            <div class="bg">
                <h1 id="Rangasala"></h1>
                <p>Welcome to the Website of the Itahari Rangasala Karate Dojo</p>
            </div>
        </div>
    </section>

My CSS for fading animation:

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fadeIn {
    animation: fadeIn 2s ease-in-out forwards;
}

My JS Code:

document.addEventListener("DOMContentLoaded", () => {
    // Background image slider
    const showcase = document.getElementById("showcase");
    const images = [
        "./img/Dojo2.jpg",
        "./img/Dojo1.jpg",
        "./img/Dojo3.jpg"
    ];
    let index = 0;

    function changeBackground() {
        showcase.style.backgroundImage = `url('${images[index]}')`;

        // Apply clip-path and center only for Dojo3.jpg
        if (images[index].includes("Dojo3.jpg")) {
            showcase.style.clipPath = "inset(10% 0 0 0)";
            showcase.style.backgroundPosition = "center";
        } else {
            showcase.style.clipPath = "none";
            showcase.style.backgroundPosition = "center";
        }

        index = (index + 1) % images.length; // Loop through images
    }

    // Set initial background and start changing every 3 seconds
    changeBackground();
    setInterval(changeBackground, 3000);

    // Typed.js initialization
    var typed = new Typed('#Rangasala', {
        strings: ['Itahari Rangasala Karate Dojo'],
        typeSpeed: 50,
        backSpeed: 25,
        loop: true,
        startDelay: 1000,
        backDelay: 1500,
        onComplete: () => {
            // Add animation class after Typed.js completes
            const rangasalaElement = document.getElementById("Rangasala");
            rangasalaElement.classList.add("fadeIn");
        }
    });

    // Blur effect
    const bg = document.querySelector('.bg');
    let load = 0;
    let int = setInterval(blurring, 30);

    function blurring() {
        load++;
        if (load > 99) {
            clearInterval(int);
        }
        bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`;
    }

    // Utility function for scaling
    function scale(num, in_min, in_max, out_min, out_max) {
        return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min;
    }
});

I want the “Rangasala” ID to show “Itahari Rangasala Karate Dojo” on fading appear animation but it is working out.
Here is the Screenshot of my FrontEnd running:
Front End