推荐使用 opacity 配合 transition 实现卡片 hover 渐显，简洁高效；若用 @keyframes 则需添加 animation-fill-mode: forwards 保持结束状态，避免回退。
用 opacity 配合 @keyframes 实现卡片 hover 时内容渐显，关键在于控制初始透明度为 0、hover 时过渡到 1，并搭配 transition 或动画时序 —— 其实更推荐用 transition，简洁自然；若坚持用 keyframes，则需配合 animation-fill-mode: forwards 保证结束状态保留。
基础结构：HTML + 默认隐藏
确保卡片内要渐显的内容（如标题、描述、按钮）默认 opacity: 0，且不占据空间或不影响布局（可加 visibility: hidden 或保持 position: absolute 等）：
.card-content {
opacity: 0;
transition: opacity 0.4s ease-in-out;
}
Hover 触发渐显（推荐 transition 方案）
无需 keyframes，一行 transition 就能实现柔和淡入，性能好、易维护：
.card:hover .card-content {
opacity: 1;
}
- transition 时间建议 0.3s–0.5s，太短显得突兀，太长拖沓
- 使用 ease-in-out 比 linear 更自然，开头慢→中间快→结尾慢
- 若内容有定位（如绝对定位在卡片底部），可同时加 transform 提升动效层次感
用 @keyframes 实现（适合复杂入场动效）
仅当需要配合位移、缩放等多属性动画时才启用 keyframes。示例：淡入 + 微上浮：
立即学习“前端免费学习笔记（深入）”；
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.card-content {
opacity: 0;
transform: translateY(10px);
animation: fadeInUp 0.4s ease-out forwards;
}
.card:hover .card-content {
animation: fadeInUp 0.4s ease-out forwards;
}
- 必须加 forwards，否则动画结束后会回退到初始状态（opacity 又变 0）
- hover 时重新触发动画，需确保 animation 属性被覆盖或重置（可借助 animation-play-state 或 JS 控制）
- 注意：频繁 hover 可能导致动画反复触发卡顿，建议加 animation-delay: 0 或用 transition 更稳妥
基本上就这些。opacity + transition 是最轻量、兼容性最好、效果也最干净的方案；keyframes 更适合进阶动效组合，别为“淡入”硬套动画——简单事，不复杂但容易忽略细节。
