0

I have the following animation and keyframes

@keyframes slideOutRight {
  0% {
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    transform: translateX(1000px);
    opacity: 0;
  }
}

.animate-slideOutRight {
  -webkit-animation: slideOutRight .5s cubic-bezier(.25,.46,.45,.94);
          animation: slideOutRight .5s cubic-bezier(.25,.46,.45,.94);
}
<div class="animate-slideOutRight ">
  <p>Hello</p>
</div>

However, after the animation is complete, it doesn't stay at opacity:0 and the item is visible.

What am I missing?

halfer
  • 19,471
  • 17
  • 87
  • 173
Marc Rasmussen
  • 18,255
  • 71
  • 189
  • 330
  • 1
    Does this answer your question? [Maintaining the final state at end of a CSS3 animation](https://stackoverflow.com/questions/12991164/maintaining-the-final-state-at-end-of-a-css3-animation) – Rana Nov 21 '21 at 19:04

0 Answers0