Set Slick Fade Animation Using CSS

To play any animation for example the fade-up animation on your main page content when it loads, you can use the following approach:

First, define the CSS animation for the fade-up effect:

HTML:

<div id="main-content">This is the main page content that will fade up.</div>

CSS:

#main-content {
  opacity: 0;
  animation: fadeUp 2s ease-in forwards;
}

@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

In the CSS, we first set the initial opacity of the .fade-up element to 0, making it invisible. Then, we define the fadeUp animation, which starts with an opacity of 0 and a vertical translation of 20 pixels (transform: translateY(20px)), and ends with an opacity of 1 and no translation (transform: translateY(0)). The animation duration is set to 2 seconds with an ease-in timing function (animation: fadeUp 2s ease-in forwards).

The forwards value at the end of the animation property ensures that the animation will stay at its final state (i.e., with an opacity of 1) after it has completed.

You can adjust the duration, timing function, and other properties of the animation to suit your needs.