在后台管理系统或营销落地页中，经常需要把一串卡片在加载后依次从下方滑入并淡现。这种效果纯靠CSS就能稳定实现，不需要引入任何脚本库。其本质是为多个元素复用同一组关键帧，并通过不同的animation-delay让它们排队播放。
一、基础实现思路
最直观的方案是给容器下的每个卡片写同样的进入动画，然后根据它在列表中的位置设置递增的延迟时间。动画本身只改变transform和opacity，这两个属性由合成器处理，不会触发布局重排，性能远好于操作margin或top。
下面是一段最小可运行的示例，假设页面中有五张卡片，我们手动为它们编写了从0.1秒到0.5秒的延迟：
.card {
opacity: 0;
transform: translateY(40px);
animation: slideIn 0.6s ease forwards;
}
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
.card:nth-child(4) { animation-delay: 0.4s; }
.card:nth-child(5) { animation-delay: 0.5s; }
@keyframes slideIn {
to {
opacity: 1;
transform: translateY(0);
}
}
这里关键点在于初始状态已经把opacity设为0并且向下偏移，配合forwards让动画结束后保留终态。如果漏掉初始透明，页面刚打开的瞬间会出现所有卡片闪一下再消失重新开始动画的糟糕体验。
这种手写nth-child的方式在卡片数量少时没问题，但列表动态变化时就需要改用更灵活的手段。
二、用CSS变量动态计算延时
现代浏览器支持在style属性里传自定义属性，我们可以在HTML中给每张卡片标记序号，然后在CSS里用calc算出延迟。这样无论后端渲染出多少条数据，都不用改样式表。
示例结构如下，注意--i就是卡片索引，从0开始：
<div class="list"> <div class="card" style="--i:0">卡片一</div> <div class="card" style="--i:1">卡片二</div> <div class="card" style="--i:2">卡片三</div> <div class="card" style="--i:3">卡片四</div> </div>
对应的CSS通过var读取--i，乘以步长得到延迟：
.card {
opacity: 0;
transform: translateY(30px);
animation: slideIn 0.5s ease forwards;
animation-delay: calc(var(--i) * 0.15s);
}
@keyframes slideIn {
to {
opacity: 1;
transform: translateY(0);
}
}
这种写法的优势是逻辑集中，延时规则只出现一次。如果产品想把间隔从0.15秒调到0.1秒，只需改一处乘法系数。另外也能轻松支持从右滑入或缩放进入，只要替换transform的值。
要注意calc内部乘法必须有一边是数值、另一边是带单位的量，写成calc(var(--i) * 0.15s)是合法的，而calc(var(--i) * 150ms)在部分旧引擎中解析不稳，建议统一用s为单位。
三、可访问性与降级处理
有些用户对运动敏感，操作系统提供了减少动态效果的开关。作为专业实现，应当用prefers-reduced-motion媒体查询关闭位移，仅保留淡入甚至直接显示。
下面代码在用户开启减弱动效时，让卡片瞬间可见且不移动：
@media (prefers-reduced-motion: reduce) {
.card {
animation: none;
opacity: 1;
transform: none;
}
}
此外，如果卡片列表是通过接口异步拉取的，元素本身是后面才插入DOM的，此时CSS动画会在节点挂载时自然触发，不需要额外用JS添加类。但若你用JS控制显隐，就要确保元素在display非none状态下再赋予动画，否则动画不会重放。
最后提醒，不要给过多卡片设置过长的总延时。例如二十张卡片间隔0.2秒，最后一张要等四秒才出现，这会让用户觉得页面卡顿。一般控制在整体一秒半内完成比较舒服。
四、与JavaScript方案对比
也有人习惯用JS循环给节点加transitionend监听或setTimeout来逐个加类，但这增加了脚本体积且不易维护。纯CSS延时方案在首屏渲染时由浏览器主线程规划，更加简洁。
下表列出两种思路差异：
| 维度 | 纯CSS延时 | JS控制 |
|---|---|---|
| 实现复杂度 | 低，仅样式 | 中，需写循环与事件 |
| 动态数量适配 | 变量驱动，自动适配 | 需重新绑定 |
| 性能开销 | 合成层，优 | 可能涉及重排 |
综合来看，卡片列表进入动效优先采用CSS自定义属性加animation-delay的模式，既满足依次滑入的视觉诉求，也兼顾了性能与可维护性。
CSS动画卡片列表animation-delay修改时间：2026-08-01 14:21:30