CSS动画如何实现图片透明度渐变_opacity与@keyframes组合使用-css教程-PHP中文网

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

P粉602998670

发布： 2025-11-30 17:43:27

原创

757人浏览过

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

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

想让图片的透明度平滑变化，比如从完全可见到慢慢消失再出现，可以用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;
  }
}

登录后复制

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

讯飞开放平台

科大讯飞推出的以语音交互技术为核心的AI开放平台

152

查看详情

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组合使用的详细内容，更多请关注php中文网其它相关文章！