1

I have the following css:

.pagination {
  opacity: 0;
  animation-name: shownum;
  animation-duration: 2s;
  animation-delay: 1s;
}
@keyframes shownum {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

but when the page loads the buttons fade in like they are supposed to, but then disappear. So how do you stop the animation to not go back to its original state which I believe is happening in this case?

2 Answers2

3

You need to set animation-fill-mode property to forwards.

.fade {
  opacity: 0;
  animation-name: shownum;
  animation-duration: 2s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

@keyframes shownum {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
<div class="fade">This div fades!</div>
TechySharnav
  • 4,869
  • 2
  • 11
  • 29
1

Once the animation ends, your opacity will once again go to 0 as that is what you have defined in your css.

Simply remove that line and it will work:

.pagination {
  animation-name: shownum;
  animation-duration: 2s;
  animation-delay: 1s;
}
Aniketh Malyala
  • 2,650
  • 1
  • 5
  • 14
  • Thanks but then the buttons display from the start, which is not what I want. –  Jun 27 '22 at 05:11
  • Ohh if you want them to display once the animation starts and then stay, then you would use animation-fill-mode: forwards; yup – Aniketh Malyala Jun 27 '22 at 05:17