Header transition effects

Hi i would like to know header transition effects to make it smoother like this website
https://www.feu.edu.ph/ its effects while scrolling down changes and while on top it goes back to its transparent state . i did just that. the catch is i dont know how to make that smooth transition like its animated. rather than having an instantaneous change of color i need to have a smoother transition just like the website i provided can someone help me

you can see default transitions here . Or you can set up different transitions using code and hide and show functions. Click here to learn more.
Note that hide and show functions can’t be applied to the header itself, however, you can place an element (e.g. a strip) inside your header and use these functions for it with the desired transition effect.

You can see a similar example of such a header here .