Css keyframes fade-in

Question

I want the posts to be affected when the site page loads, for example fade-in, but the posts that are seen when loading, the rest of the posts are fixed and without effects, someone can help me in this case. I used css for this effect.

    @keyframes fade-in {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }

Answer 1

You have to specify the animation-name on the div you want to be associated with it. Also, animations with opacity work best when you set an animation-duration . The div doesn't have to have the same name as the animation, just specify the animation name in any div. See the CSS changes I made below.

 @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } div { animation-name: fade-in; animation-duration: 5s; }

 <div class="fade-in"><p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. </p></div> <div><p>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups. </p></div>