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;
}
}
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>