直接对<table>元素使用CSS animation基本无效，因其受表格格式化上下文限制，transform/opacity动画常被浏览器降级或忽略；应改用父容器动画、逐行动画（作用于<tr>）或加载遮罩层实现。
直接用 animation 属性给 <table> 元素加「动态加载特效」基本无效——浏览器会忽略对表格根元素的大部分 transform/opacity 动画，尤其是当表格有 border-collapse: collapse 或内部单元格存在固有布局约束时。
为什么 table 元素 animation 常常不生效
表格渲染依赖于复杂的内部格式化上下文（table formatting context），CSS 动画中常用的 transform 和 opacity 在 <table> 上会被强制降级或跳过，尤其在 Chrome 和 Safari 中表现明显。你可能看到：动画声明写了、@keyframes 也定义了，但表格毫无反应，或者只闪一下就卡住。
-
<table>不是典型的「可动画容器」，它的尺寸和位置由内部行/列内容驱动，而非自身盒模型 - 即使加了
animation-fill-mode: forwards，结束帧也可能被后续 layout 重置 - Firefox 相对宽容，但跨浏览器一致性差，不能作为生产依据
真正可行的加载动画加在哪儿
把动画目标从 <table> 挪到它的父容器，或用一个包裹层承接动画，是最稳定的做法。同时配合「数据加载中」状态控制显隐，避免 DOM 冲突。
- 给
<div class="table-wrapper">加animation，再让<table>作为子元素自然跟随（例如 fade-in + translateY） - 如果要模拟「逐行浮现」，动画必须作用在
<tr>上，且需确保每行已渲染（不能等 JS 动态插入后再加类——那样会触发回流） - 用
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> 加 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 导致错位或抖动
加载遮罩层比表格动画更实用
用户感知的「加载特效」，本质是「内容未就绪时的等待反馈」，不是表格本身动起来。直接在表格外层盖一个 <div id="loading-overlay">，用纯 CSS 实现 spinner 或骨架屏，反而更可控、兼容性更好、SEO 友好。
- 遮罩层必须用
position: fixed或absolute+z-index，否则会被表格撑开或错位 - 隐藏时机用
window.addEventListener('load', ...)，不是DOMContentLoaded，否则图片/字体未加载完就消失 - 骨架屏建议用
<div class="skeleton-row">模拟<tr>高度+圆角色块，比 GIF 更轻量
表格动画的复杂点不在写法，而在 layout 约束与动画模型的天然冲突。能用遮罩解决的问题，就别硬套 animation 到 <table> 上。
