How to hide block with keyframes?

Question

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

<div class="text">text text text text</div>
This fist stroke of text

You probably gonna need js to do it exactly the way you want. display property just doesn't work with animations. — Mosia Thabo, Jun 17 '19 at 00:16

AdityaSrivast · Answer 1 · 2019-06-16T23:49:21.960

0

animation does not work with display.
But you can try something like this:

.text {
    animation: opacity-animation .5s forwards;
}

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

    to {
        opacity: 0;
        height: 0;
    }
}

<div class="text">text text text text</div>
This fist stroke of text

Hope it helps!

edited Jun 16 '19 at 23:49

answered Jun 16 '19 at 23:43

AdityaSrivast

948
1
8
14

score 0 · Answer 2 · answered Jun 17 '19 at 01:58

Use position: absolute; in animation.

.text {
  animation:  opacity-animation 2s forwards;
}

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

<div class="text">text text text text</div>
This fist stroke of text

How to hide block with keyframes?

2 Answers2