推荐使用 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 等）：
Hover 触发渐显（推荐 transition 方案）
无需 keyframes，一行 transition 就能实现柔和淡入，性能好、易维护：
transition 时间建议 0.3s–0.5s，太短显得突兀，太长拖沓
使用
ease-in-out
比 linear 更自然，开头慢→中间快→结尾慢
若内容有定位（如
绝对定位
在卡片底部），可同时加 transform 提升动效层次感
用 @keyframes 实现（适合复杂入场动效）
仅当需要配合位移、缩放等多属性动画时才启用 keyframes。示例：淡入 + 微上浮：
php版微信js-sdk支付接口类
php版微信js-sdk支付接口类
下载
立即学习
“
前端免费学习笔记（深入）
”；
必须加
forwards
，否则动画结束后会回退到初始状态（opacity 又变 0）
hover 时重新触发动画，需确保 animation 属性被覆盖或重置（可借助 animation-play-state 或 JS 控制）
注意：频繁 hover 可能导致动画反复触发卡顿，建议加 animation-delay: 0 或用 transition 更稳妥
基本上就这些。opacity + transition 是最轻量、兼容性最好、效果也最干净的方案；keyframes 更适合进阶动效组合，别为“淡入”硬套动画——简单事，不复杂但容易忽略细节。
.card-content {
opacity: 0;
transition: opacity 0.4s ease-in-out;
}.card:hover .card-content {
opacity: 1;
}@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;
}