卡片入场突兀源于缺少过渡节奏和视觉缓冲，应结合 opacity 与 transform（如 translateY）实现 fadeInUp 动画，选用 ease-out 或 cubic-bezier 缓动，时长 0.3–0.5s，添加 stagger 延迟，并设初始 opacity: 0、visibility: hidden 及 animation-fill-mode: forwards。
卡片入场太突兀，核心是缺少过渡节奏和视觉缓冲。用 @keyframes 做 fade-in 动画本身没问题，但“突兀”往往来自 opacity 瞬间跳变、缺乏位移配合，或动画时长/缓动函数没调好。
关键：opacity + transform 一起动
只改透明度会显得“贴在原地闪出来”。加一点点位移（比如从下往上轻抬），能模拟自然浮现感：
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px); /* 从下方20px处开始 */
}
to {
opacity: 1;
transform: translateY(0); /* 回到原位 */
}
}
.card {
animation: fadeInUp 0.4s ease-out forwards;
}
选对缓动函数很重要
别用 linear 或 ease-in——linear 像机械滑入，ease-in 开头太慢、结尾太冲。推荐：
- ease-out：开头快、结尾柔，适合“落定”感
- cubic-bezier(0.25, 0.46, 0.45, 0.94)：轻微回弹，更灵动（常用在 Material Design）
- 或直接用 ease（浏览器默认）：比 ease-out 稍饱满，也够温和
控制时长和延迟，避免“扎堆出现”
多张卡片一起进场？别全用相同时间，加 stagger 效果更自然：
立即学习“前端免费学习笔记（深入）”；
.card:nth-child(1) { animation-delay: 0.1s; }
.card:nth-child(2) { animation-delay: 0.2s; }
.card:nth-child(3) { animation-delay: 0.3s; }
单卡时长建议 0.3s–0.5s：短于 0.3s 显快，长于 0.6s 易显拖沓。
别忘了初始状态要隐藏
确保卡片默认不可见，否则动画前会“闪一下”：
- 加
opacity: 0和visibility: hidden到基础样式 - 动画结束用
forwards锁定最终态（即opacity: 1; visibility: visible） - 如果卡片有边框/阴影，transform 不影响布局，比 margin/padding 更安全
基本上就这些——不复杂但容易忽略细节。动效不是越花哨越好，而是让眼睛觉得“它本来就在那儿，只是刚刚准备好被看见”。
