纯CSS动画更高效：用transform和@keyframes实现404页面呼吸感、滚动反馈及SVG路径动效，避免top/left重排、确保keyframes定义、优先操作transform/opacity、加will-change提升性能、SVG内联并正确计算stroke-dasharray/dashoffset、动画时长1.2–1.8s、必加prefers-reduced-motion降级、慎用font-display:swap、用animation-fill-mode:forwards保持终态。
用 transform 和 @keyframes 实现轻量级动画，别碰 JS
纯 HTML + CSS 就能做出有呼吸感、滚动反馈或路径动效的 404 页面，加 JS 反而容易卡顿或触发 CSP 报错。核心是用 transform 做位移/缩放/旋转，配合 @keyframes 控制节奏——浏览器原生硬件加速，兼容性也稳（IE10+ 都支持）。
常见错误是直接对 top/left 动画，这会强制重排，页面一卡一卡的；还有人用 animation: fadeIn 1s 却没写 @keyframes fadeIn，结果动画根本不跑。
- 动画元素优先选
<div> 或 <code><svg></svg>，避免在<p></p>或<span></span>上叠加复杂 transform - 关键帧里尽量只改
transform和opacity，别碰width、height、margin - 加
will-change: transform到动画容器，对长列表或频繁触发动画的页面有明显提升 - 把 SVG 写在 HTML 里（别外链），方便统一配色和响应式缩放
- 给
<path></path>加vector-effect="non-scaling-stroke"，防止缩放时描边粗细突变 - 动画时间控制在 1.2–1.8s 区间，太快显得慌，太慢用户早关页了
- 别只写
@media (prefers-reduced-motion)，完整写法是@media (prefers-reduced-motion: reduce) - 降级不是去掉所有动画，而是换成本能、低刺激的方式，比如用
opacity替代transform: translateY - 测试方法：macOS 系统设置 → 辅助功能 → 显示 → 减少运动；Windows 设置 → 辅助功能 → 视觉 → 显示 → 减少运动
- 内联 SVG 图标时，删掉编辑器自动生成的
xmlns、xml:space等冗余属性，能省 100+ 字节 - 用
viewBox而非固定width/height，方便用 CSS 缩放且不失真 - 所有动画 duration 和 delay 都用
s（秒）单位，别混用ms，易读错也难维护
用 SVG 路径做「断连」动画，比 PNG 更锐利也更小
404 页面里常见的「断开的链条」「碎裂的服务器」「消失的数据包」这类意象，用 SVG <path></path> 描边动画实现最干净。比起加载一张带透明通道的 PNG，SVG 可以直接内联进 HTML，体积常小于 2KB，还能用 CSS 控制描边颜色、虚线节奏和动画时长。
典型坑是 stroke-dasharray 和 stroke-dashoffset 算错：必须先用 JS 或开发者工具查出路径总长度（getTotalLength()），再设成 dasharray="L L"、dashoffset="L" 才能实现“从无到有”的绘制效果。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
:hover 触发的交互动画要加 prefers-reduced-motion 降级
很多 404 页面会在「返回首页」按钮上加悬浮上浮 + 微旋，但对开启系统“减少运动”设置的用户（iOS/Android/macOS/Windows 都有该选项），这种动画可能引发眩晕。CSS 里必须用 @media (prefers-reduced-motion: reduce) 把 hover 动画直接切为 transition: none 或降级为淡入淡出。
不加这个媒体查询，不仅不符合 WCAG 2.1 标准，Chrome DevTools 的 Lighthouse 也会标红“未处理减少动画偏好”。
字体图标动效慎用 font-display: swap，优先内联 SVG
有人用 Font Awesome 或 Iconfont 的「404」图标加旋转动画，结果首屏看到文字先闪一下、图标才加载出来——这就是 font-display: swap 在字体未就绪时用系统字体兜底导致的。404 页面本就不该等字体，图标建议直接用内联 SVG，或者至少把关键图标 SVG 写死在 HTML 里。
如果真要用字体图标，font-display: optional 比 swap 更稳妥：字体加载失败就用默认字符，不会闪动；但要注意它在 Firefox 中支持度略差，得加 fallback。
animation-fill-mode: forwards 锁住最终位置，否则它会弹回起点。还有就是移动端 touch 事件没 hover，得补上 :active 样式，不然点击反馈全丢。
