Unable to make a smooth transition in background color when scroll event is triggered

Question

I am trying to to create a fixed header for one of my projects using react. The background color of the Header should be transparent when the web page is opened but on scrolling it down, it should change its color to black. I have managed to make the transition smooth while changing the background color from transparent to black (when I scroll down) however, I am unable to make the transition smooth when the background color changes from black to transparent (when I scroll back up).

Here is my Code :

import React from 'react';
import Navbar from '../Navbar/Navbar.js';
import logo from '../images/nsut_logo.png';

class Header extends React.Component {
    constructor() {
        super();
        this.state = {
            header: false
        };
        this.handleScroll = this.handleScroll.bind(this);
    }

    componentDidMount(){
        window.addEventListener("scroll", this.handleScroll);
      }

    handleScroll(event) {
        if (window.pageYOffset > 0) {
              this.setState({ header: true });   
        }
        else{
              this.setState({ header: false });
        }
    }

    
    
    render() {
        return (
            <header onScroll={this.handleScroll}>
                <div className={this.state.header ? "Header-Site-Title-Active" : "Header-Site-Title"}>
                    <img className = "Header-logo" src={logo} />
                    
                    <div className="Department-Name">
                        <h1 >
                            <b>Department Of Computer Science And Engineering</b>
                            <br/>
                        </h1>
                        <h3>
                            Netaji Subhas University of Technology
                        </h3>
                        
                    </div>          
                    <Navbar />
                </div>
            </header>
        );
    }
}

export default Header;

Here is my CSS File:

header{
  top: 0;
  padding-bottom: 1%;
  position: fixed;
  z-index: 5;
  height: 17vh;
}


@keyframes bgChangeDown {
  0% {background-color: none;}
  100% {background-color: black;}
}

@keyframes bgChangeUp {
  0% {background-color: inherit;}
  100% {background-color: none;}
}



.Handle-Site-Title {
  height: 100px;
    width: 100vw;
  top: 0;
  animation-name: bgChangeUp;
  animation-duration: 2s;
  animation-iteration-count: 1;
  transition: ease-in 1.5s;
  animation-fill-mode: forwards;
}


.Header-Site-Title-Active {
    height: 100px;
    width: 100vw;
  top: 0;
  animation-name: bgChangeDown;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  transition: ease-in 1.5s;
}

.Header-logo{
    height:100px;
    padding: 5px 10px 0 5px;
    margin: 0;
    display: inline;
    float: left;
}


.Department-Name{
    margin: 0;
    margin-bottom: 5px;
    height: 100px;
    float: left;
    display: inline;
    color: white;
}

.Department-Name h3{
    margin-bottom: 15px;
    margin-top: -17px
}


.hamburger{
    position: fixed;
    cursor: pointer;
    margin: 5px;
    right: 5%;
    top: 5%;
}



.line{
    width: 30px;
    height: 3px;
    background: white;
    margin: 5px;
}


.sidenav {
  height: 100%; /* 100% Full-height */
  width: 0; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  right: 0;
  background-color: black; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}


.sidenav-active {
  height: 100%; /* 100% Full-height */
  width: 250px; /* 0 width - change this with JavaScript */
  position: fixed; /* Stay in place */
  z-index: 1; /* Stay on top */
  top: 0; /* Stay at the top */
  right: 0;
  background-color: black; /* Black*/
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 60px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */

}


/* The navigation menu links */
.sidenav a, .sidenav-active a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: white;
  display: block;
  transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .sidenav-active a:hover {
  color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.sidenav .closebtn, .sidenav-active .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}




@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

I am still learning React so feel free to suggest a new approach as well.

Answer 1

The classes that you're applying in your React component are Header-Site-Title-Active and Header-Site-Title but in your CSS your bgChangeUp animation is assigned to the Handle-Site-Title class, not Header-Site-Title:

.Handle-Site-Title {
  height: 100px;
    width: 100vw;
  top: 0;
  animation-name: bgChangeUp;
  animation-duration: 2s;
  animation-iteration-count: 1;
  transition: ease-in 1.5s;
  animation-fill-mode: forwards;
}

.Header-Site-Title-Active {
    height: 100px;
    width: 100vw;
  top: 0;
  animation-name: bgChangeDown;
  animation-duration: 2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  transition: ease-in 1.5s;
}

Further to this, this effect may be more easily achieved using CSS transitions:

.Header-Site-Title {
  ...
  background-color: transparent;
  transition: background-color ease-in 1.5s;
  ...
}

.Header-Site-Title-Active {
  ...
  background-color: rgba(0,0,0,black);
  ...
}