在网页开发中，让元素淡入淡出是一个常见需求。css的transition属性配合opacity属性，可以用很少的代码实现平滑的透明度变化，不需要借助javascript不断修改样式。opacity表示元素的不透明度，值为1时完全显示，为0时完全透明。transition则负责在opacity值改变时加入过渡动画。
opacity与transition基础
opacity是css中控制元素透明程度的属性，它会影响元素自身及其子元素。transition的基本语法如下：
.box {
opacity: 1;
/* 当opacity变化时，用0.5秒完成过渡，缓动函数为ease */
transition: opacity 0.5s ease;
}
.box.hide {
opacity: 0;
}
当元素从类box切换到box hide时，opacity从1变为0，浏览器会在0.5秒内逐渐修改透明度，形成淡出效果。
为什么选择opacity做动画
与修改width、height等属性不同，opacity位于合成层阶段处理，不会触发重排和重绘，只涉及合成层的透明度混合。因此用opacity做过渡动画通常更流畅，也更容易被移动端设备加速。
常见使用场景
- 提示框的显示与隐藏
- 轮播图切换时的交叉淡入
- 页面加载后的入场动画
配合visibility避免交互问题
元素opacity为0时仍占据页面空间并可被点击，如果希望隐藏后不响应事件，可以结合visibility：
.fade {
opacity: 1;
visibility: visible;
transition: opacity 0.4s linear, visibility 0s 0.4s;
}
.fade.out {
opacity: 0;
visibility: hidden;
transition: opacity 0.4s linear, visibility 0s 0s;
}
上面代码中，visibility在淡出完成后才变为hidden，淡入时则立即变回visible，避免元素透明时还能被点到。
注意事项
虽然opacity动画性能较好，但要注意以下情况：
| 问题 | 说明 |
|---|---|
| 子元素继承透明 | 父元素opacity小于1时，子元素也会变透明，无法单独恢复 |
| 过渡不生效 | 若未设置transition或属性名写错，opacity会瞬间变化 |
| 字体模糊 | 部分浏览器在opacity动画中可能出现文字渲染抖动 |
简单js触发示例
通过添加或移除类即可控制动画：
// 获取元素并切换隐藏类
var el = document.querySelector('.fade');
el.classList.toggle('out');
合理使用css transition与opacity，可以用纯样式完成大多数透明度动画，让页面交互更自然且易于维护。
css_transitionopacity透明度动画修改时间：2026-07-29 19:57:18