CSS3 Animation执行完毕后恢复0透明度问题求助

我明白你遇到的困扰——明明加了animation-fill-mode: forwards，动画结束后元素还是变回了opacity:0。结合你的场景，咱们一步步排查解决：

1. 先检查动画关键帧的定义 #

forwards的作用是让元素保持动画最后一帧的样式，如果你的关键帧最后又跳回了0，那肯定没用。确保关键帧的最终状态是opacity:1：

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

如果你的动画里写了类似100% { opacity: 0; }的错误配置，赶紧修正过来。

2. 排查样式优先级冲突 #

如果元素默认的opacity:0是写在内联样式里（比如<div style="opacity:0"></div>），它的优先级会比动画样式高，即使加了forwards也会被覆盖。这时候有两个解决办法：

• 把内联的opacity样式移到CSS类中；
• 应急方案：在关键帧的最后一帧加!important（不推荐长期用，但能快速验证问题）：

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

3. 确认动画类没有被意外移除 #

如果你的JS代码在动画结束后不小心移除了动画类，元素会立刻回到默认状态。你可以用浏览器开发者工具，在动画结束后检查元素的类列表，看看动画类是否还存在。

如果需要重复触发动画，正确的写法应该是在动画结束后移除类，下次点击再添加：

const trigger = document.querySelector('.your-trigger-element');
const target = document.querySelector('.your-animated-element');

trigger.addEventListener('click', () => {
  target.classList.add('fade-in-animation');
});

// 动画结束后移除类，方便下次触发
target.addEventListener('animationend', () => {
  target.classList.remove('fade-in-animation');
});

4. 检查动画的其他属性设置 #

比如animation-iteration-count设为无限循环、animation-direction设为交替反向，也会导致元素回到初始状态。确保动画属性配置正确：

.fade-in-animation {
  animation: fadeIn 1s ease-in-out forwards;
  animation-iteration-count: 1; /* 只播放一次，默认就是1，但可以明确写出来 */
}

按照这几步排查，应该就能解决问题啦！

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