CSS animation works during development but then stops when site is pushed live, why?

Question

I have a React application that holds just a simple static website. I have some CSS animations using keyframes which work as expected when testing it in the node development server using npm start but when I push the project to my live site using Firebase hosting, all animations stop working as expected. The fade-in-* classes no longer slowly fade in, the text just 'pops' into place with no gradual opacity change. Can anyone see why this might be?

I have added -moz- and -webkit- keyframes also. This seems to be the case on all browsers. Tested in Edge, Chromew and Firefox, all give the same result.

main.css

.font-big {
    font-size: 1.2rem!important;
}
.font-small {
    font-size: 0.8rem;
}
.text-black {
    color: black;
}
.hidden {
    display: none;
}
.footer {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #f5f5f5;
}

.welcome-fade-in {
    -moz-animation: fade-in-welcome 1s ease-in;
    -webkit-animation: fade-in-welcome 1s ease-in;
    animation: fade-in-welcome 1s ease-in;
}
.welcome-name-in {
    -moz-animation: fade-in-welcome-name 2s ease-in;
    -webkit-animation: fade-in-welcome-name 2s ease-in;
    animation: fade-in-welcome-name 2s ease-in;
}
.welcome-text-in {
    -moz-animation: fade-in-welcome-text 3s ease-in;
    -webkit-animation: fade-in-welcome-text 3s ease-in;
    animation: fade-in-welcome-text 3s ease-in;
}
.welcome-text-explore {
    -moz-animation: fade-in-explore-text 4s ease-in;
    -webkit-animation: fade-in-explore-text 4s ease-in;;
    animation: fade-in-explore-text 4s ease-in;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-image: url("./bg.gif");
}
@keyframes fade-in-welcome {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 100%;
    }
}
@keyframes fade-in-welcome-name {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 100%;
    }
}
@keyframes fade-in-welcome-text {
    0% {
        opacity: 0;
    }
    70% {
        opacity: 0;
    }
    100% {
        opacity: 100%;
    }
}
@keyframes fade-in-explore-text {
    0% {
        opacity: 0;
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 100%;
    }
}
@-moz-keyframes fade-in-welcome {
    0% {
        -moz-opacity: 0;
    }
    100% {
        -moz-opacity: 100%;
    }
}
@-moz-keyframes fade-in-welcome-name {
    0% {
        -moz-opacity: 0;
    }
    50% {
        -moz-opacity: 0;
    }
    100% {
        -moz-opacity: 100%;
    }
}
@-moz-keyframes fade-in-welcome-text {
    0% {
        -moz-opacity: 0;
    }
    70% {
        -moz-opacity: 0;
    }
    100% {
        -moz-opacity: 100%;
    }
}
@-moz-keyframes fade-in-explore-text {
    0% {
        -moz-opacity: 0;
    }
    75% {
        -moz-opacity: 0;
    }
    100% {
        -moz-opacity: 100%;
    }
}
@-webkit-keyframes fade-in-welcome {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 100%;
    }
}
@-webkit-keyframes fade-in-welcome-name {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 100%;
    }
}
@-webkit-keyframes fade-in-welcome-text {
    0% {
        opacity: 0;
    }
    70% {
        opacity: 0;
    }
    100% {
        opacity: 100%;
    }
}
@-webkit-keyframes fade-in-explore-text {
    0% {
        opacity: 0;
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 100%;
    }
}

Landing.js

import React, {Component} from 'react';
import {Link} from "react-router-dom";
import * as ROUTES from "../constants/routes";


class Landing extends Component {
    constructor(props) {
        super(props);

    }


    render() {
        return (
            <div className="container d-flex justify-content-center h-100">
                <div className="row align-self-center">
                    <div className="col-12 text-center flex-wrap">
                        <h1 className="text-uppercase welcome-fade-in">Welcome to my website</h1>
                        <h2 className="welcome-name-in">My name is Adam Foot</h2>
                        <h3 className="welcome-text-in">A Front-End Developer from Stroud</h3>
                        <Link to={ROUTES.HOME} className="text-decoration-none text-black align-self-end"><h4 className="welcome-text-explore">Explore >>></h4></Link>
                    </div>
                </div>
            </div>
        );
    }

}

export default Landing;

question from:https://stackoverflow.com/questions/65641053/css-animation-works-during-development-but-then-stops-when-site-is-pushed-live

Answer 1

Waitting for answers