hide a text at the end of the animation - html

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;
}
}
Could someone explain to me how I can make it disappear? I thought so it worked but it doesn't work! I wanted to make a text disappear, the effect works but then the text comes back visible when instead I would like to hide it permanently at the end of the animation.

Answer 1

You can use the CSS property animation-fill-mode, and change your Keyframe Animation like so:
.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

If you even toggle the display property from none to block, your transition on other elements will not occur. It's work only with displayed elements. If u want to hide element u can use 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"/>