在HTML5网页开发中，实现元素的淡入淡出过渡效果是非常基础且常用的交互需求，核心是通过CSS的transition属性控制元素透明度opacity的变化过程，再配合JavaScript动态修改透明度值来触发动画。
核心相关属性说明
opacity属性
opacity是CSS中用于控制元素透明度的属性，取值范围是0到1，0表示元素完全透明不可见，1表示元素完全不透明。修改这个属性的值，就可以改变元素的显示状态。
transition属性
transition是CSS3新增的过渡属性，用于定义元素属性变化时的过渡效果，它可以指定需要过渡的属性、过渡持续时间、过渡速度曲线和过渡延迟时间。要实现淡入淡出，只需要让opacity属性的变化产生过渡效果即可。
纯CSS实现自动淡入淡出
如果只是需要实现元素加载后自动执行淡入淡出循环的效果，不需要用户交互触发，可以直接用CSS完成，不需要额外写JavaScript代码。
/* 定义淡入淡出动画的关键帧 */
@keyframes fadeInOut {
0% {
opacity: 0; /* 初始状态完全透明 */
}
50% {
opacity: 1; /* 中间状态完全不透明 */
}
100% {
opacity: 0; /* 结束状态回到完全透明 */
}
}
/* 应用动画到目标元素 */
.fade-element {
width: 200px;
height: 100px;
background-color: #4CAF50;
/* 调用动画：动画名称 持续时间 速度曲线 延迟时间 循环次数 */
animation: fadeInOut 2s ease-in-out 0s infinite;
}
对应的HTML结构只需要一个带有对应类名的元素即可：
<div class="fade-element">自动淡入淡出元素</div>
JS触发淡入淡出效果
更多场景下我们需要通过用户点击、鼠标悬停等交互行为来触发淡入淡出效果，这时候就需要结合JavaScript来动态修改元素的opacity属性，同时用transition属性控制过渡过程。
基础实现步骤
- 首先给目标元素设置初始opacity值和transition属性，指定opacity的变化过渡时间为0.5秒
- 通过JavaScript监听交互事件，比如点击事件
- 在事件回调函数中判断当前元素的opacity值，动态切换为0或者1，触发过渡动画
完整的代码示例如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS触发淡入淡出示例</title>
<style>
.target-box {
width: 300px;
height: 150px;
background-color: #2196F3;
color: white;
text-align: center;
line-height: 150px;
font-size: 20px;
/* 初始透明度为1，完全显示 */
opacity: 1;
/* 定义opacity属性变化时的过渡效果：持续0.5秒，速度均匀 */
transition: opacity 0.5s linear;
}
.hidden {
/* 隐藏状态的透明度为0 */
opacity: 0;
}
.btn {
margin-top: 20px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="target-box" id="targetBox">点击按钮触发淡入淡出</div>
<button class="btn" id="toggleBtn">切换显示/隐藏</button>
<script>
// 获取目标元素和按钮元素
const targetBox = document.getElementById('targetBox');
const toggleBtn = document.getElementById('toggleBtn');
// 给按钮添加点击事件监听
toggleBtn.addEventListener('click', function() {
// 判断当前是否有hidden类，有就移除（淡入），没有就添加（淡出）
if (targetBox.classList.contains('hidden')) {
targetBox.classList.remove('hidden');
} else {
targetBox.classList.add('hidden');
}
});
</script>
</body>
</html>
常见问题解答
为什么修改opacity后没有过渡效果
通常是没有给元素设置transition属性，或者transition属性没有指定opacity作为过渡属性。需要确认样式中是否包含transition: opacity 过渡时间 速度曲线;这样的定义。
淡入淡出后元素还能点击吗
当opacity为0时，元素只是视觉上不可见，但是仍然占据文档流位置，并且可以响应点击事件。如果需要元素隐藏后不响应点击，可以配合visibility: hidden;属性一起使用，在opacity为0时设置visibility为hidden，显示时设置为visible。
transition和animation有什么区别
transition需要属性变化触发，适合简单的状态切换过渡；animation可以自动执行，适合复杂的循环或者多状态动画。淡入淡出场景两种都可以实现，根据是否需要自动执行选择即可。
HTML5动画淡入淡出透明度动画css_transition修改时间：2026-06-29 21:18:56