使用CSS transition与opacity可实现元素透明度渐变效果，如淡入淡出或悬停隐藏。通过设置初始opacity值并结合:hover等状态改变该值，transition自动补全动画过程，性能优良且无需JavaScript。例如按钮悬停时opacity从1过渡到0.5；若需完全隐藏元素并释放布局空间，应配合visibility使用，因display不可动画。典型应用包括图片加载完成后的淡入效果：初始opacity为0，加载后添加类使opacity变为1，配合onload事件触发过渡。此方法简洁高效，适用于多数透明度动画场景。
使用 CSS 的 transition 与 opacity 结合，可以轻松实现元素的透明度渐变效果，比如淡入、淡出或悬停时的柔和显示隐藏。这种做法性能好，且无需 JavaScript。
基本原理
opacity 控制元素的透明度（0 完全透明，1 完全不透明），transition 则定义 opacity 变化过程的动画时长和缓动方式。要实现渐变，只需设置初始 opacity，然后通过伪类（如 :hover）或类切换来改变 opacity 值，transition 会自动补全中间帧动画。
常见用法示例
以下是一个按钮悬停时逐渐变透明的例子：.fade-button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
opacity: 1; /* 初始不透明 */
transition: opacity 0.3s ease; /* 过渡效果 */
}
.fade-button:hover {
opacity: 0.5; /* 悬停时变半透明 */
}当鼠标移上按钮时，opacity 从 1 平滑过渡到 0.5，持续 0.3 秒，使用 ease 缓动函数。
配合 display 使用的注意事项
opacity 只控制视觉透明，并不会真正“隐藏”元素。如果需要在完全透明后让元素不占布局空间，不能直接用 transition 动画 display 属性（因为 display 不可动画）。解决方法是结合 opacity 和 visibility，并用 JavaScript 控制类切换时机：
立即学习“前端免费学习笔记（深入）”；
.modal {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease;
}
.modal.hidden {
opacity: 0;
visibility: hidden;
}JavaScript 中可先添加 hidden 类，等动画结束后再移除元素或更改状态。
淡入淡出完整示例
模拟一个图片加载后的淡入效果：.image {
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.image.loaded {
opacity: 1;
}@@##@@
图片加载完成后自动添加 loaded 类，opacity 从 0 渐变到 1，实现平滑淡入。
基本上就这些。transition 配合 opacity 简单高效，适合大多数透明度动画场景，注意合理搭配 visibility 处理交互逻辑即可。
