hide a text at the end of the animation

Question

 .title2 {
   position: absolute;
   top: 0;
   right: 31%;
   animation-name: fadeOutOpacity;
   animation-iteration-count: 1;
   animation-delay: 2.5s;
   animation-timing-function: ease-out;
   animation-duration: 1s;
 }
 @keyframes fadeOutOpacity {
   0% {
     opacity: 1;
   }
   90% {
     opacity: 0;
   }
   100% {
     display: none;
   }
 }

Could someone explain to me how I can make it disappear? I thought so it worked but it doesn't work! I wanted to make a text disappear, the effect works but then the text comes back visible when instead I would like to hide it permanently at the end of the animation.

Answer 1

You can use the CSS property animation-fill-mode, and change your Keyframe Animation like so:

.title2 {
  position: absolute;
  top: 0;
  right: 31%;
  animation-name: fadeOutOpacity;
  animation-iteration-count: 1;
  animation-delay: 2.5s;
  animation-timing-function: ease-out;
  animation-duration: 1s;
  animation-fill-mode: forwards;
}

@keyframes fadeOutOpacity {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}