Question

现在动画之后是一个空的div .text。我必须用平滑的不透明动画完全隐藏该块。（例如display：none，但display：none不会设置动画）如何使用关键帧？

.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

Answer 1

animation与display不兼容。
但是您可以尝试执行以下操作：

.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

希望有帮助！

Answer 2

在动画中使用position: absolute;。

.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

如何用关键帧隐藏块？

2 个答案: