直接对元素使用css animation基本无效，因其受表格格式化上下文限制，transform/opacity动画常被浏览器降级或忽略；应改用父容器动画、逐行动画（作用于）或加载遮罩层实现。
直接用 animation 属性给 <table> 元素加「动态加载特效」基本无效——浏览器会忽略对表格根元素的大部分 transform/opacity 动画，尤其是当表格有 <code>border-collapse: collapse 或内部单元格存在固有布局约束时。
为什么 table 元素 animation 常常不生效
表格渲染依赖于复杂的内部格式化上下文（table formatting context），CSS 动画中常用的 transform 和 opacity 在 <table> 上会被强制降级或跳过，尤其在 Chrome 和 Safari 中表现明显。你可能看到：动画声明写了、<code>@keyframes 也定义了，但表格毫无反应，或者只闪一下就卡住。
<table> 不是典型的「可动画容器」，它的尺寸和位置由内部行/列内容驱动，而非自身盒模型 <li>即使加了 <code>animation-fill-mode: forwards，结束帧也可能被后续 layout 重置- Firefox 相对宽容，但跨浏览器一致性差，不能作为生产依据
真正可行的加载动画加在哪儿
把动画目标从 <table> 挪到它的父容器，或用一个包裹层承接动画，是最稳定的做法。同时配合「数据加载中」状态控制显隐，避免 DOM 冲突。
<ul><li>给 <code><div class="table-wrapper"> 加 <code>animation，再让 <table> 作为子元素自然跟随（例如 fade-in + translateY）
<li>如果要模拟「逐行浮现」，动画必须作用在 <code><tr> 上，且需确保每行已渲染（不能等 JS 动态插入后再加类——那样会触发回流）
<li>用 <code>visibility: hidden + opacity: 0 初始状态，比 display: none 更利于动画衔接
示例结构：
<div class="table-wrapper" style="opacity: 0; transform: translateY(10px);"> <table>...</table> </div>
然后用 CSS 触发入场动画：
@keyframes slideIn {
to { opacity: 1; transform: translateY(0); }
}
.table-wrapper {
animation: slideIn 0.4s ease-out forwards;
}
动态插入行时如何触发动画
单纯给新 <tr> 加 <code>animation 类没用——它需要「从无到有」的视觉变化，而浏览器不会自动为刚 append 的节点播放 enter 动画。必须手动触发重排或利用 void 技巧。
- 插入后立刻读取
offsetHeight（哪怕只是 console.log(tr.offsetHeight)），强制触发 layout，再加动画类 - 更可靠方式：插入前先加
class="tr-enter"，该类含opacity: 0; transform: scaleY(0.8);；插入后用setTimeout(() => tr.classList.add('tr-enter-active'), 1)延迟一帧激活过渡 - 避免对
<td> 单独设动画，容易因 padding/border/border-collapse 导致错位或抖动 <h3>加载遮罩层比表格动画更实用</h3> <p>用户感知的「加载特效」，本质是「内容未就绪时的等待反馈」，不是表格本身动起来。直接在表格外层盖一个 <code><div id="loading-overlay">，用纯 CSS 实现 spinner 或骨架屏，反而更可控、兼容性更好、SEO 友好。 <ul> <li>遮罩层必须用 <code>position: fixed或absolute+z-index，否则会被表格撑开或错位 - 隐藏时机用
window.addEventListener('load', ...)，不是DOMContentLoaded，否则图片/字体未加载完就消失 - 骨架屏建议用
<div class="skeleton-row"> 模拟 <code><tr> 高度+圆角色块，比 GIF 更轻量 <p>表格动画的复杂点不在写法，而在 layout 约束与动画模型的天然冲突。能用遮罩解决的问题，就别硬套 <code>animation到<table> 上。</table>
