如何用CSS Transition实现生日网站表格行逐行渐显（间隔0.5秒）？

你要的每行间隔0.5秒渐显效果，完全可以用CSS动画实现，不需要JavaScript。核心思路是利用CSS animation 自动播放的特性，给每行设置递增的动画延迟。以下是具体实现步骤：

1. 基础HTML结构 #

先构建14行21列的表格，通过给需要上色的单元格添加类（比如.filled）来呈现「生日快乐」图案：

<table class="birthday-table">
  <!-- 第1行 -->
  <tr>
    <td class="filled"></td>
    <td></td>
    <td class="filled"></td>
    <!-- 补全剩余18个td，根据图案需求添加/移除.filled类 -->
  </tr>
  <!-- 重复上述结构，完成14行表格 -->
  <tr>
    <!-- 第2行单元格 -->
  </tr>
  <!-- ... 直到第14行 -->
</table>

2. CSS实现渐显效果 #

基础样式配置 #

先设置表格和单元格的基础外观，调整大小、颜色等：

.birthday-table {
  border-collapse: collapse;
  margin: 20px auto;
}

.birthday-table td {
  width: 22px;
  height: 22px;
  border: 1px solid #f0f0f0;
}

/* 图案单元格的颜色 */
.birthday-table .filled {
  background-color: #ff4757;
}

行渐显动画逻辑 #

给所有行设置初始透明状态，然后定义渐显动画，再通过nth-child给每行设置递增的延迟：

/* 所有行初始透明 */
.birthday-table tr {
  opacity: 0;
  /* 动画：从透明到显示，结束后保持最终状态 */
  animation: fadeInRow 0.7s forwards;
}

/* 给每行设置递增的延迟，间隔0.5秒 */
.birthday-table tr:nth-child(1) { animation-delay: 0s; }
.birthday-table tr:nth-child(2) { animation-delay: 0.5s; }
.birthday-table tr:nth-child(3) { animation-delay: 1s; }
.birthday-table tr:nth-child(4) { animation-delay: 1.5s; }
.birthday-table tr:nth-child(5) { animation-delay: 2s; }
.birthday-table tr:nth-child(6) { animation-delay: 2.5s; }
.birthday-table tr:nth-child(7) { animation-delay: 3s; }
.birthday-table tr:nth-child(8) { animation-delay: 3.5s; }
.birthday-table tr:nth-child(9) { animation-delay: 4s; }
.birthday-table tr:nth-child(10) { animation-delay: 4.5s; }
.birthday-table tr:nth-child(11) { animation-delay: 5s; }
.birthday-table tr:nth-child(12) { animation-delay: 5.5s; }
.birthday-table tr:nth-child(13) { animation-delay: 6s; }
.birthday-table tr:nth-child(14) { animation-delay: 6.5s; }

/* 渐显动画关键帧 */
@keyframes fadeInRow {
  from { opacity: 0; }
  to { opacity: 1; }
}

为什么之前用Transition没成功？ #

CSS transition 需要状态变化触发条件（比如hover、类名切换），而你要的是页面加载后自动依次显示，这种场景下animation更合适——它可以在元素渲染完成后自动执行，不需要额外触发逻辑。

可调整的参数 #

• 动画时长：修改animation里的0.7s，数值越大渐显越慢
• 延迟间隔：修改每行animation-delay的递增步长（当前是0.5s）
• 图案颜色：调整.filled类的background-color值
• 单元格大小：修改td的width和height

内容的提问来源于stack exchange，提问作者Mohanned Almohandes