css卡片hover时内容渐渐显现怎么做_用opacity与keyframes实现软淡入-css教程-PHP中文网

css卡片hover时内容渐渐显现怎么做_用opacity与keyframes实现软淡入

P粉602998670

发布： 2025-12-13 14:14:02

原创

285人浏览过

推荐使用 opacity 配合 transition 实现卡片 hover 渐显，简洁高效；若用 @keyframes 则需添加 animation-fill-mode: forwards 保持结束状态，避免回退。

css卡片hover时内容渐渐显现怎么做_用opacity与keyframes实现软淡入

用 opacity 配合 @keyframes 实现卡片 hover 时内容渐显，关键在于控制初始透明度为 0、hover 时过渡到 1，并搭配 transition 或动画时序 —— 其实更推荐用 transition，简洁自然；若坚持用 keyframes，则需配合 animation-fill-mode: forwards 保证结束状态保留。

基础结构：HTML + 默认隐藏

确保卡片内要渐显的内容（如标题、描述、按钮）默认 opacity: 0，且不占据空间或不影响布局（可加 visibility: hidden 或保持 position: absolute 等）：

.card-content {<br>  opacity: 0;<br>  transition: opacity 0.4s ease-in-out;<br>}

登录后复制

Hover 触发渐显（推荐 transition 方案）

无需 keyframes，一行 transition 就能实现柔和淡入，性能好、易维护：

.card:hover .card-content {<br>  opacity: 1;<br>}

登录后复制

transition 时间建议 0.3s–0.5s，太短显得突兀，太长拖沓
使用 ease-in-out 比 linear 更自然，开头慢→中间快→结尾慢
若内容有定位（如绝对定位在卡片底部），可同时加 transform 提升动效层次感

用 @keyframes 实现（适合复杂入场动效）

仅当需要配合位移、缩放等多属性动画时才启用 keyframes。示例：淡入 + 微上浮：

Perplexity

Perplexity是一个ChatGPT和谷歌结合的超级工具，可以让你在浏览互联网时提出问题或获得即时摘要

302

查看详情

立即学习“前端免费学习笔记（深入）”；

@keyframes fadeInUp {<br>  from {<br>    opacity: 0;<br>    transform: translateY(10px);<br>  }<br>  to {<br>    opacity: 1;<br>    transform: translateY(0);<br>  }<br>}<br><br>.card-content {<br>  opacity: 0;<br>  transform: translateY(10px);<br>  animation: fadeInUp 0.4s ease-out forwards;<br>}<br><br>.card:hover .card-content {<br>  animation: fadeInUp 0.4s ease-out forwards;<br>}

登录后复制