简单的流实验室 OBS 文本淡入淡出。淡入不起作用

Question

这是我使用的CSS和HTML代码

#alert-text {
padding: 20px;
text-transform: uppercase;
font-style: italic;
animation: fadein 3s;
animation: fadeOut 1s 11s forwards;
text-shadow: 0px 0px 1px #000, 0px 0px 2px #000, 0px 0px 3px #000, 0px 0px 4px #000, 0px 0px 5px #000;
}

<div id="alert-text">

Answer 1

#alert-text {
padding: 20px;
text-transform: uppercase;
font-style: italic;
animation: fade 12s forwards;
text-shadow: 0px 0px 1px #000, 0px 0px 2px #000, 0px 0px 3px #000, 0px 0px 4px #000, 0px 0px 5px #000;
opacity: 0;
}
@keyframes fade {
0% {
opacity: 0;
}
12% {
/*12/100 */
opacity: 1;
}
88% {
opacity: 1;
}
100% {
opacity: 0;
}
}

<p id="alert-text">Alert!</p>

你需要添加关键帧

@keyframes fadeOut {
0%   { opacity: 1; }
100% { opacity: 0; }
}

https://css-tricks.com/snippets/css/keyframe-animation-syntax/https://www.w3schools.com/cssref/css3_pr_animation-keyframes.asp