如何实现元素淡入指定不透明度？动画异常问题求助

想要实现元素淡入至80%不透明度的效果，做了如下设置：

1. 给目标元素设置基础不透明度：

#urlTextOne {
    opacity: 80%; 
}

2. 定义淡入动画的CSS类：

.fadeIn {
    animation: fadeIn 5s;
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 80%;}
}

3. 通过JS移除元素的d-none类（让元素显示）并添加淡入类：

urls[i].classList.remove('d-none'); 
urls[i].classList.add('fadeIn');

但实际效果不符合预期：元素先显示为半透明状态，然后变为完全透明，最后跳转到80%不透明度。

原因 #

移除d-none后，元素立刻加载基础样式的80%不透明度并显示；紧接着添加fadeIn类触发动画，由于动画的0%关键帧是opacity:0，浏览器会强制将元素不透明度切换到0，再执行从0到80%的动画，视觉上就出现了“显示→变透明→跳回目标值”的异常效果。

解决方法 #

调整元素初始状态和动画填充模式，让动画从透明开始，结束后保持目标不透明度：

1. 修改元素的基础样式，初始设为透明：

#urlTextOne {
    opacity: 0;
}

2. 给动画添加forwards属性，让动画结束后保留最终帧的状态：

.fadeIn {
    animation: fadeIn 5s forwards;
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 80%;}
}

这样操作后，移除d-none并添加fadeIn类时，元素会从完全透明开始，平滑淡入到80%不透明度，且动画结束后会一直保持这个状态，完全符合预期。

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