1

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;
  }
}
Leonardo
  • 2,439
  • 33
  • 17
  • 31
s-mostafa-d
  • 11
  • 1

1 Answers1

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>
Kameron
  • 10,240
  • 4
  • 13
  • 26
  • I tested the animation-duration before, but when the page loads, the first posts of the effect are executed, but when you scroll down, nothing happens. – s-mostafa-d Dec 30 '21 at 16:05
  • @s-mostafa-d See [here](https://stackoverflow.com/questions/34954689/trigger-a-css-keyframe-animation-via-scroll) for JavaScript methods to make animations start on scroll. – Kameron Dec 30 '21 at 16:07