CSS如何实现页面淡入动画效果_利用animation配合opacity-css教程-PHP中文网

用@keyframes实现淡入动画需显式定义from/to（或0%/100%）的opacity变化，配合animation属性及animation-fill-mode:forwards保持结束状态，避免display:none冲突、父容器裁剪或js重排导致失效。

css如何实现页面淡入动画效果_利用animation配合opacity

直接加 animation 就行，但得配对写 @keyframes，不能只改 opacity 就以为完事了。浏览器不会自动补帧，0% 和 100% 的状态必须显式声明。

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
元素上加 animation: fade-in 0.3s ease-out;
别漏 from/to —— 写成 0% { opacity: 0; } 和 100% { opacity: 1; } 也行，但少写一行就可能白跑
动画默认不触发：元素得先在 DOM 里、且初始状态是 opacity: 0（或靠 class 控制），否则一上来就 1，看不出“淡入”

多数不是写错了，而是被 CSS 层叠或渲染时机卡住。

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

父容器有 overflow: hidden 且子元素初始位置超出视口，动画过程中被裁掉——先确保元素能“露出来”再动
动画 class 是 JS 动态加的，但加完立刻触发重排（比如读 offsetHeight），导致浏览器跳过首帧——加个 setTimeout(() => el.classList.add('fade-in'), 0) 或用 requestAnimationFrame
用了 display: none 控制显隐，它和 opacity 冲突：display: none 时元素不参与渲染，opacity 根本不生效——该用 visibility: hidden 配合 opacity

必须。不加的话，动画播完会瞬间回退到 opacity: 0（或初始值），用户只看到一闪。

animation-fill-mode: forwards 让元素保持最后一帧的样式（即 opacity: 1）
如果同时用了 transition 控制其他属性（比如 transform），forwards 只管 animation 里定义的属性，不影响 transition 行为
兼容性没问题：Chrome 43+、Firefox 16+、Safari 9+、Edge 12+ 都支持

性能问题往往藏在合成层和重绘逻辑里。

避免在 @keyframes 里同时改 opacity 和 height / margin —— 后者触发布局（layout），拖慢动画
如果淡入对象是图片或带阴影的卡片，加 will-change: opacity 提前提示浏览器升层，但别滥用，会增加内存开销
移动端 Safari 对 opacity 动画优化好，但若父容器有 backface-visibility: hidden 或 transform: translateZ(0)，反而可能干扰合成——先去掉试试
动画时长低于 0.15s 用户感知弱，超过 0.4s 容易觉得慢；0.25s 是较稳妥的中间值