CSS文本淡出后反复出现问题求助

问题描述 #

我给文本设置了淡出效果，但文本完全消失后会重新显示。按照YouTube教程写的代码如下：

原CSS代码

.fade-in-fade-out{
    padding-top: 5em;
    animation: fade-inout 3s alternate;
}

@keyframes fade-inout {
    0%{ opacity: 1;}
    100%{ opacity: 0;}
  }

  @-o-keyframes fade-inout{
    0%{ opacity: 1;}
    100%{ opacity: 0;}
  }
  @-moz-keyframes fade-inout{
    0%{ opacity: 1;}
    100%{ opacity: 0;}
  }
  @-webkit-keyframes fade-inout{
    0%{ opacity: 1;}
    100%{ opacity: 0;}
  }
  .fade-in-fade-out {
     -webkit-animation: fade-inout35s alternat;
     -moz-animation: fade-inout35s alternate;
     -o-animation: fade-inout35s alternate;
      animation: fade-inout35s alternat;
  }

原HTML代码

<link rel="stylesheet" href="index.css">
<h1 class="fade-in-fade-out">Text</h1>

问题分析 #

1. 重复类定义与拼写错误：重复定义了.fade-in-fade-out类，后续定义覆盖了初始规则，还存在两处拼写错误：
   • fade-inout35s：动画名与时长未用空格分隔，正确写法为fade-inout 35s
   • alternat：缺少字母e，正确属性值为alternate
2. 动画循环与反向播放：alternate属性会让动画在正向播放后反向执行（从透明变回不透明），加上CSS动画默认的循环行为，导致文本消失后重新显示。

修复方案 #

修正拼写错误，移除过时的浏览器前缀，添加animation-fill-mode: forwards让动画停在结束状态：

修复后的CSS

.fade-in-fade-out {
    padding-top: 5em;
    animation: fade-inout 3s forwards; /* forwards 保持动画结束状态 */
}

@keyframes fade-inout {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

修复后的HTML（无需修改）

<link rel="stylesheet" href="index.css">
<h1 class="fade-in-fade-out">Text</h1>

关键说明 #

• animation-fill-mode: forwards：指定动画结束后，元素保持动画最后一帧的样式（即opacity: 0），不会回到初始状态。
• 移除浏览器前缀：现代主流浏览器已支持标准@keyframes语法，无需再添加-webkit-、-moz-、-o-前缀。

内容的提问来源于stack exchange，提问作者P Studio