隐藏动画末尾的文本

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

有人能向我解释一下我怎样才能让它消失吗？我想是的，它起作用了，但不起作用！我想让一个文本消失，效果很好，但当我想在动画结束时永久隐藏它时，文本又回来了。

Answer 1

您可以使用CSS属性animation-fill-mode，并更改关键帧动画，如下所示：

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

Answer 2

如果您甚至将display属性从none切换到block，则不会在其他元素上进行转换。它只适用于显示的元素。如果你想隐藏元素，你可以使用opacity、height

.title2 {
width: 100px;
height: 50px;
background: red;
position: absolute;
top: 0;
right: 31%;
animation: 1s fadeOutOpacity ease-out;
opacity: 0
}
@keyframes fadeOutOpacity {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}

<div class="title2"/>