CODEWITHSUNDEEP
javascripthtmlcsscss-animations
s-mostafa-d
s-mostafa-d

Reputation: 21

Css keyframes fade-in

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

Upvotes: 2

Views: 791

Answers (1)

Kameron
Kameron

Reputation: 10846

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>

Upvotes: 2

Related Questions