CSS实现动画开始前文本opacity为0 结束后opacity为1

你现有代码存在3个问题导致效果不符合预期：

• 未给文本设置初始opacity: 0，页面加载后、动画等待阶段文本会直接显示，无法做到默认完全透明
• 动画时长设置为3s，和需求中「动画启动1秒即结束」的要求不匹配
• 未设置动画填充模式，动画执行完成后会回弹到元素初始样式，无法保持opacity:1的可见状态

修正后的完整代码如下：

.defult-text{
  position: absolute;
  top: 360px;
  right: 650px;
  text-align: center;
  font-size: 30px;
  font-family: 'Itim';
  color: #c5c6c7;
  /* 初始状态完全透明，覆盖默认可见的样式 */
  opacity: 0;
  /* 动画属性合并写法：动画名 持续时长 延迟时长 填充模式 */
  animation: fadeIn 1s 1s forwards;
}

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

参数说明 #

• 持续时长填1s：对应动画启动后1秒播放完成的要求，淡入过程会在这1秒内均匀完成
• 延迟时长填1s：代表页面加载完成后等待1秒再启动淡入动画，如果不需要等待、要页面加载后立刻开始淡入，把这个值改为0s即可
• 填充模式填forwards：强制动画播放完成后停在最后一帧的样式，也就是永久保持opacity:1的完全不透明状态，不会回弹

内容的提问来源于stack exchange，提问作者the leibo