css - 如何在关键帧动画后隐藏元素

Question

我试图在关键帧动画之后隐藏带有文本的元素：

<div id="overlay">
    <div id="alignMe">
        <p>Zoom mit</p>
        <p>zwei Fingern</p>
    </div>
</div>

@keyframes w100 {
        0% {
            height: 0%;
            opacity: 0;
        }

        25% {
            height: 30vw;
            opacity: 1;
        }

        75% {
            height: 30vw;
            opacity: 1;

        }

        100% {
            height: 0vw;
            opacity: 0.5;
            visibility: hidden;
        }
    }

现在我遇到了在动画父级高度时文本剩余的问题。我通过设置visibility: hidden;动画的 100% 状态来解决它。还有另一种动画方式吗？

标签： css

Answer 1

好吧 - 解决方案只是添加overflow: hidden;到父元素。解决我所有的问题。