CSS动画如何实现图片透明度渐变_opacity与@keyframes组合使用

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

CSS动画如何实现图片透明度渐变_opacity与@keyframes组合使用

2025-11-30

浏览次数：次

返回列表

使用CSS opacity与@keyframes可实现图片透明度平滑变化，如淡入淡出动画。通过设置opacity的0到1值控制透明度，结合@keyframes定义0%、50%、100%关键帧实现从透明到完全显示再消失的效果，并用animation属性将动画绑定到图片，设定持续时间、速度曲线和无限循环，最终实现高性能的视觉过渡效果。

css动画如何实现图片透明度渐变_opacity与@keyframes组合使用

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

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;
  }
}

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

来画数字人|直播|

来画数字人自动化|直播|，无需请真人主播，即可实现24小时|直播|，无缝衔接各大|直播|平台。

57 查看详情来画数字人直播

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>

@@##@@