html表格动画通过css的@keyframes和animation属性实现，如页面加载时表格渐入滑入效果，核心是定义动画序列并应用到table元素，使表格从透明、偏移状态平滑显现。
HTML表格的动画效果主要通过CSS来实现，尤其是利用
@keyframes规则定义动画序列，然后通过
animation属性将其应用到表格元素（如
<table>,
<tr>,
<td>）上。这能让静态的表格在加载、交互或数据更新时变得生动起来，给用户带来更流畅、更直观的体验。
要给HTML表格添加动画效果，最核心的工具就是CSS的
@keyframes规则和
animation属性。这不像JavaScript那样需要复杂的DOM操作，更多是声明式的，定义好动画的“轨迹”和“速度”，然后指定哪个元素去“跑”这个轨迹。
我们先从一个最常见的场景开始：让整个表格在页面加载时有一个渐入或滑入的效果。
HTML结构（index.html
）:
立即学习“前端免费学习笔记（深入）”；
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格动画示例</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="table-container">
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>城市</th>
<th>职业</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>28</td>
<td>北京</td>
<td>软件工程师</td>
</tr>
<tr>
<td>李四</td>
<td>32</td>
<td>上海</td>
<td>产品经理</td>
</tr>
<tr>
<td>王五</td>
<td>25</td>
<td>深圳</td>
<td>设计师</td>
</tr>
<tr>
<td>赵六</td>
<td>30</td>
<td>广州</td>
<td>市场专员</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>CSS动画（style.css
）:
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f4f7f6;
margin: 0;
}
.table-container {
width: 80%;
max-width: 900px;
background-color: #fff;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
border-radius: 8px;
overflow: hidden; /* 防止内容溢出 */
}
table {
width: 100%;
border-collapse: collapse;
margin: 0;
opacity: 0; /* 初始状态隐藏 */
transform: translateY(20px); /* 初始状态向下偏移 */
animation: fadeInSlideUp 1s ease-out forwards; /* 应用动画 */
}
table th, table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #e0e0e0;
}
table th {
background-color: #007bff;
color: white;
font-weight: 600;
position: sticky; /* 表头固定 */
top: 0;
}
table tbody tr:nth-child(even) {
background-color: #f8f8f8;
}
table tbody tr:hover {
background-color: #e9f7fe;
transition: background-color 0 
