CSS透明度渐变：opacity与@keyframes实战教程

想让图片实现丝滑的淡入淡出效果，无需JavaScript——只需用CSS的`opacity`属性配合`@keyframes`动画即可轻松搞定：通过定义0%（完全透明）、50%（完全不透明）、100%（再次透明）的关键帧，并用`animation`绑定持续时间、缓动曲线和无限循环，就能创建高性能、易维护的视觉过渡效果，无论是轮播图切换还是页面元素入场动画，都简洁高效又赏心悦目。

想让图片的透明度平滑变化，比如从完全可见到慢慢消失再出现，可以用CSS中的 opacity 属性配合 @keyframes 来实现。这种方法不依赖JavaScript，性能好，适合做淡入淡出、轮播图过渡等视觉效果。

1. opacity 属性控制透明度

opacity 的取值范围是 0 到 1：

• 0 表示完全透明（看不见）
• 1 表示完全不透明（完全可见）
• 0.5 就是半透明

它可以直接用在图片上，例如：

img {
  opacity: 0.3;
}

2. 使用 @keyframes 定义动画关键帧

@keyframes 用来描述动画过程中某个时间点的样式状态。你可以设定多个阶段，比如开始、中间、结束。

下面是一个从透明到不透明再回到透明的渐变动画：

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

这个动画表示：图片从“看不见”变到“完全显示”，再慢慢“消失”。

3. 将动画应用到图片元素

写好关键帧后，用 animation 属性把动画绑定到图片上：

img {
  animation: fade 3s ease-in-out infinite;
}

这段代码的含义是：

• fade：使用的动画名称（对应 @keyframes fade）
• 3s：动画持续3秒
• ease-in-out：速度曲线，开始和结束慢，中间快
• infinite：无限循环播放

4. 完整示例代码

把上面的部分组合起来：

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

  img {
    width: 300px;
    height: 200px;
    animation: fade 3s ease-in-out infinite;
  }
</style>

<img src="example.jpg" alt="渐变图片">

页面加载后，这张图片就会不断进行淡入淡出的动画。

基本上就这些。掌握 opacity 和 @keyframes 的搭配，就能轻松做出各种透明度过渡效果，不复杂但容易忽略细节，比如动画时长和循环设置。

以上就是《CSS透明度渐变：opacity与@keyframes实战教程》的详细内容，更多关于的资料请关注golang学习网公众号！