html - How to hide block with keyframes?

Now after the animation is an empty div .text. I have to hide the block completely with smooth opacity animation. (such as display:none, but display: none doesn't animate) How do it with keyframes?

.text {

  animation:  opacity-animation .5s forwards;
}

@keyframes opacity-animation {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }

}

text text text text
This fist stroke of text