17370845950

推荐使用 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 更适合进阶动效组合，别为“淡入”硬套动画——简单事，不复杂但容易忽略细节。