CSS淡入淡出动画效果实现CSS淡入淡出动画效果实现以下是使用CSS实现淡入淡出动画的两种常用方法，分别适用于不同场景

CSS淡入淡出动画效果实现

以下是使用CSS实现淡入淡出动画的两种常用方法，分别适用于不同场景：

方法一：使用 transition 实现状态切换淡入淡出

.fade-element {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

/* 触发状态（hover/active/添加class等） */
.fade-element.active {
  opacity: 1;
}

使用场景：适合需要用户交互触发的效果（如hover、点击显示等）

方法二：使用 animation 实现自动循环淡入淡出

@keyframes fadeInOut {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.auto-fade {
  animation: fadeInOut 3s ease-in-out infinite;
}

使用场景：适合需要自动循环的提示信息、轮播图等

完整示例（包含两种效果）

<!DOCTYPE html>
<html>
<head>
<style>
/* 方法一：过渡效果 */
.fade-transition {
  width: 200px;
  height: 100px;
  background: blue;
  opacity: 0;
  transition: opacity 0.5s;
}

.fade-transition:hover {
  opacity: 1;
}

/* 方法二：自动动画 */
.fade-animation {
  width: 200px;
  height: 100px;
  background: red;
  animation: fade 2s infinite;
}

@keyframes fade {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}
</style>
</head>
<body>

<!-- 悬停触发 -->
<div class="fade-transition">Hover me</div>

<!-- 自动循环 -->
<div class="fade-animation">Auto Fade</div>

</body>
</html>

高级技巧

延迟动画：

.delayed-fade {
  animation: fadeInOut 3s ease-in-out 1s infinite;
  /* 最后一个1s表示延迟1秒执行 */
}

组合动画（淡入+移动）：

@keyframes fadeSlide {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

性能优化：

使用 will-change: opacity; 预声明变化
优先使用 transform 和 opacity 属性实现动画

浏览器兼容性

所有现代浏览器均支持
如需支持IE10等老旧浏览器，需添加 -ms- 前缀
推荐始终添加标准写法：

transition: opacity 0.3s;
-webkit-transition: opacity 0.3s; /* Safari */

可根据具体需求调整动画持续时间（0.3s）、缓动函数（ease-in-out）和触发方式。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github