CSS如何实现页面切换时的平滑淡入_利用animation与opacity-css教程-PHP中文网

必须加 transform: translatez(0) 触发 gpu 加速，否则 opacity 动画在旧版 safari 和 android webview 中易闪烁卡顿；禁用 display: none/visibility: hidden，改用 opacity + pointer-events 控制显隐。

css如何实现页面切换时的平滑淡入_利用animation与opacity

animation + opacity 实现页面切换淡入，必须加 transform: translateZ(0)

单纯用 opacity 配合 animation 做淡入，在部分浏览器（尤其是旧版 Safari 和 Android WebView）会出现闪烁、掉帧或动画卡顿。根本原因是 opacity 动画没触发硬件加速，浏览器仍在用 CPU 做合成。

解决办法是强制开启 GPU 加速，最轻量且兼容性好的写法是加一个不影响布局的 transform: translateZ(0)：

/* 正确写法：触发硬件加速 */
.fade-in {
  opacity: 0;
  animation: fadeIn 0.3s ease-out forwards;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateZ(0); }
  to { opacity: 1; transform: translateZ(0); }
}

不要只写 opacity 动画，不加 transform 属性 —— iOS 15 之前 Safari 极大概率闪屏
translateZ(0) 比 translate3d(0,0,0) 更轻量，语义更清晰，两者效果一致
如果页面已有其他 transform（比如 rotate 或 scale），无需重复加 translateZ(0)，但得确保它出现在 keyframes 里

页面切换时 opacity 动画失效？检查 display: none / visibility: hidden

常见错误是：在淡入前把元素设为 display: none，或者用 visibility: hidden 配合 opacity: 0 —— 这会导致 @keyframes 根本不执行，因为元素已脱离渲染流或被隐藏锁定。

正确做法是让元素始终处于渲染树中，仅靠 opacity 控制可见性：

初始状态用 opacity: 0; pointer-events: none;（避免点击穿透）
绝对不要用 display: none 切换状态，改用 opacity + pointer-events 组合
如果必须用 JS 控制显隐，用 element.style.opacity = '0' 替代 element.style.display = 'none'
visibility: hidden 会阻止动画触发，除非先设成 visibility: visible 再开动画

transition 和 animation 哪个更适合页面切换？

用 transition 更简单，但只适合「有明确触发状态变化」的场景（比如路由切换后 class 切换）；animation 更可控，适合需要精确时序、延迟、循环或 JS 主动触发的流程。

CSS婚礼策划服务机构宣传网站模板

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

下载

实际项目中推荐这样选：

单页应用（SPA）路由切换：用 transition + class 切换，性能好、代码少
需要 JS 控制淡入时机（比如数据加载完再显示）：用 animation，配合 animation-play-state 或 JS 的 element.animate()
要兼容 IE10+：避开 element.animate()，坚持用 CSS @keyframes + class 切换
避免混用：不要一边写 transition: opacity，一边又用 animation 控制同一元素的 opacity，行为不可预测