如何为HTML表格添加动画效果？CSS怎么实现？

<style>
    /* 基础表格样式，让效果更明显 */
    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }
    th, td {
        border: 1px solid #ddd;
        padding: 12px 15px;
        text-align: left;
    }
    th {
        background-color: #f2f2f2;
    }

    /* 方案一：简单的行悬停动画 */
    tr {
        transition: background-color 0.3s ease, transform 0.3s ease;
    }
    tr:hover {
        background-color: #e0f7fa; /* 浅蓝色背景 */
        transform: scale(1.01); /* 轻微放大 */
        box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 增加阴影 */
        z-index: 1; /* 确保放大时不会被遮挡 */
        position: relative; /* 配合z-index */
    }

    /* 方案二：单元格点击反馈动画 */
    td {
        transition: background-color 0.2s ease, color 0.2s ease;
        cursor: pointer; /* 提示可点击 */
    }
    td:active { /* 模拟点击按下状态 */
        background-color: #c8e6c9; /* 浅绿色 */
        color: #333;
        transform: translateY(1px); /* 轻微下沉 */
    }

    /* 方案三：数据加载或新增行的入场动画 (需要JS配合添加类) */
    @keyframes fadeInSlideIn {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .new-row-animation {
        animation: fadeInSlideIn 0.5s ease-out forwards;
    }

    /* 方案四：特定单元格闪烁提示 (例如，数据更新) */
    @keyframes highlightPulse {
        0% { background-color: transparent; }
        50% { background-color: #fffacd; } /* 柠檬纱 */
        100% { background-color: transparent; }
    }
    .highlight-cell {
        animation: highlightPulse 1.5s ease-in-out 2; /* 闪烁两次 */
    }
</style>

<table>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>城市</th>
        </tr>
    </thead>
    <tbody>
        <tr class="new-row-animation">
            <td>张三</td>
            <td>30</td>
            <td>北京</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>25</td>
            <td class="highlight-cell">上海</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>35</td>
            <td>广州</td>
        </tr>
    </tbody>
</table>

<script>
    // 模拟动态添加行，并触发动画
    document.addEventListener('DOMContentLoaded', () => {
        const tbody = document.querySelector('table tbody');
        setTimeout(() => {
            const newRow = document.createElement('tr');
            newRow.innerHTML = `<td>赵六</td><td>28</td><td>深圳</td>`;
            newRow.classList.add('new-row-animation'); // 添加动画类
            tbody.appendChild(newRow);
        }, 1000); // 1秒后添加新行
    });

    // 模拟单元格数据更新，并触发闪烁
    document.addEventListener('DOMContentLoaded', () => {
        const shanghaiCell = document.querySelector('.highlight-cell');
        setTimeout(() => {
            shanghaiCell.textContent = '杭州'; // 假设数据更新
            shanghaiCell.classList.remove('highlight-cell'); // 移除旧的，确保能再次触发
            void shanghaiCell.offsetWidth; // 强制reflow，重置动画
            shanghaiCell.classList.add('highlight-cell'); // 再次添加以触发动画
        }, 3000); // 3秒后更新并闪烁
    });
</script>

/* CSS */
@keyframes fadeOutSlideUp {
    from {
        opacity: 1;
        transform: translateY(0);
        max-height: 50px; /* 假设行高最大值 */
        padding-top: 12px;
        padding-bottom: 12px;
    }
    to {
        opacity: 0;
        transform: translateY(-20px);
        max-height: 0; /* 收缩高度 */
        padding-top: 0;
        padding-bottom: 0;
        overflow: hidden; /* 隐藏内容溢出 */
    }
}
.fade-out-row {
    animation: fadeOutSlideUp 0.6s ease-out forwards; /* forwards让动画停留在最后一帧 */
}

// JavaScript (简化示例)
function deleteRowWithAnimation(rowElement) {
    rowElement.classList.add('fade-out-row'); // 添加动画类

    // 监听动画结束事件，动画结束后移除元素
    rowElement.addEventListener('animationend', () => {
        rowElement.remove();
    }, { once: true }); // { once: true } 确保事件只触发一次
}

// 假设你有一个删除按钮，点击时调用这个函数
// const deleteButton = document.getElementById('some-delete-button');
// deleteButton.addEventListener('click', () => {
//     const targetRow = document.getElementById('row-to-delete');
//     if (targetRow) {
//         deleteRowWithAnimation(targetRow);
//     }
// });

@media (prefers-reduced-motion: reduce) {
    /* 在用户偏好减少动态效果时，禁用或简化动画 */
    tr, td, .new-row-animation, .highlight-cell {
        transition: none !important; /* 禁用所有过渡 */
        animation: none !important; /* 禁用所有动画 */
    }
    /* 或者只保留最基本的视觉提示 */
    tr:hover {
        background-color: #e0f7fa; /* 仅改变背景色，不缩放 */
        transform: none;
        box-shadow: none;
    }
}