CSS动画渐显渐隐方法详解

网页设计中，元素的出现和消失如果太生硬，用户体验会打折扣。比如一个提示框突然蹦出来，或者图片切换没有过渡，看起来就很突兀。这时候用CSS实现渐显渐隐效果，能让页面更自然流畅。

使用 opacity 和 transition 实现简单淡入淡出

最常用的方法是结合 opacity 属性和 transition 过渡效果。比如让一个盒子在鼠标移入时慢慢变透明，移出时恢复。

<div class="fade-box">悬停我试试</div>

.fade-box {
  width: 200px;
  height: 100px;
  background-color: #007bff;
  color: white;
  text-align: center;
  line-height: 100px;
  transition: opacity 0.5s ease;
}

.fade-box:hover {
  opacity: 0.3;
}

这样鼠标放上去，盒子会缓慢变透明，拿开又慢慢恢复。整个过程柔和，不刺眼。

用 @keyframes 制作自定义动画

如果想让元素自己动起来，比如页面加载时自动淡入，就可以用 @keyframes 定义关键帧动画。

<div class="fade-in">欢迎回来！</div>

.fade-in {
  opacity: 0;
  animation: fadeIn 1.5s ease forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

这个例子中，元素一开始不可见（opacity为0），然后在1.5秒内逐渐显示。常用于首页标题、弹窗内容等需要“缓缓出现”的场景。

反向操作：实现淡出隐藏

如果要让元素慢慢消失，可以反过来设置动画方向。比如点击关闭按钮后，提示条缓缓淡出。

.fade-out {
  animation: fadeOut 1s ease forwards;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

配合JavaScript，在特定事件触发后添加 fade-out 类，就能实现点击后渐隐消失的效果。

注意 display 和 visibility 的区别

只改 opacity 不会影响布局，元素虽然看不见，但还占着位置。如果希望彻底“腾出空间”，可以配合 visibility 或在动画结束后用JS修改 display: none。

.fade-out-remove {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s, visibility 0.6s;
}

这样在透明的同时也会隐藏占位，适合菜单收起、广告条关闭等场景。