最直接方式是用 opacity 配合 @keyframes 实现渐隐渐现，opacity 取值 0–1，需明确定义动画名称并调用，注意初始状态与动画起始帧不同、避免 display: none、兼顾可访问性与性能。
用 opacity + @keyframes 实现渐隐渐现
最直接的方式是结合 opacity 属性和 CSS 动画帧。注意：opacity 取值范围是 0（完全透明）到 1（完全不透明），不能用百分比或单词如 hidden。
-
opacity: 0不影响元素的文档流位置，只是“看不见”，仍占空间、可响应事件（除非加pointer-events: none） - 动画必须定义
@keyframes名称，并在元素上通过animation或其子属性调用 - 若想首次加载就触发，需确保元素初始状态与动画起始帧不同（例如初始
opacity: 0，动画从0 → 1）
@keyframes fadeInOut {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
.element {
animation: fadeInOut 2s ease-in-out infinite;
}
为什么只改 opacity 有时没动画效果？
常见原因是浏览器跳过了过渡/动画——因为 opacity 没被声明为可动画属性，或缺少触发条件。
- 确保元素有明确的
animation声明，而不是仅靠transition；如果用transition，要配合 JS 触发类名切换或伪类（如:hover） - 某些旧版浏览器（如 IE9 及以下）不支持
@keyframes，但支持filter: alpha(opacity=xx)—— 现代项目基本可忽略 - 若元素是
display: none状态，opacity动画不会生效（它已脱离渲染树），应改用visibility: hidden+opacity
transition 方式更适合手动控制显隐
当需要 JS 控制「点击显示/隐藏」时，transition 比 @keyframes 更自然，因为它响应属性变化而非固定周期。
- 必须在元素默认样式中声明
transition: opacity 0.3s ease，否则变化是瞬时的 - 推荐搭配
visibility使用：先设visibility: hidden; opacity: 0，再通过 JS 切换类名激活visibility: visible; opacity: 1 - 避免只依赖
opacity过渡来“隐藏”交互区域——低opacity仍可能被点击，记得加pointer-events: none配合
.fade-element {
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s;
}
.fade-element.show {
opacity: 1;
visibility: visible;
}
性能与可访问性要注意什么？
opacity 是 CSS 合成属性（composited property），浏览器通常会将其提升到独立图层，动画较流畅。但仍有细节容易被忽略：
立即学习“前端免费学习笔记（深入）”；
- 频繁触发动画（如滚动中持续 toggle）可能造成卡顿，建议加
will-change: opacity提前提示（但别滥用） - 屏幕阅读器不会因
opacity: 0自动忽略内容，若内容真该被忽略，请同时加aria-hidden="true"或用display: none（此时不能再靠opacity动画） - 动画时间不宜过短（
< 0.1s）或过长（> 0.4s），前者难感知，后者易打断用户操作节奏
