如何在CSS中实现透明度渐变过渡_opacity动画技巧-css教程-PHP中文网

如何在CSS中实现透明度渐变过渡_opacity动画技巧

P粉602998670

发布： 2025-11-12 21:14:02

原创

856人浏览过

使用transition和animation可实现CSS透明度渐变，hover时通过transition平滑改变opacity实现淡入淡出，自动循环动画则用@keyframes定义关键帧并设置infinite循环，多个元素交错出现可通过animation-delay控制延迟，配合forwards保持最终状态，注意opacity影响整体元素，性能敏感场景建议优化或使用rgba替代。

如何在css中实现透明度渐变过渡_opacity动画技巧

在CSS中实现透明度渐变过渡，也就是让元素的 opacity 值随时间平滑变化，常用于淡入、淡出、悬停效果或轮播图切换。这种动画效果简单却非常实用。下面介绍几种常用方法和技巧。

使用 transition 实现 hover 淡入淡出

当你希望元素在鼠标悬停时逐渐变透明或显现，可以结合 :hover 伪类与 transition 属性。

示例：图片悬停时变半透明

.fade-img {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.fade-img:hover {
  opacity: 0.5;
}

登录后复制

说明：元素默认不透明，当鼠标移上时，opacity 在 0.3 秒内线性过渡到 0.5，移开后自动恢复。

使用 @keyframes 创建循环淡入淡出动画

如果需要自动播放的透明度动画（如广告横幅轮播），使用 @keyframes 更合适。

示例：元素周期性闪烁

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

.blink {
  animation: fadeInOut 2s infinite;
}

登录后复制

说明：该动画从完全透明到完全显示再回到透明，每2秒循环一次。适用于提示性元素。

多个元素交错淡入（延迟控制）

在制作列表或卡片组依次出现的效果时，可通过设置不同的 animation-delay 实现错峰动画。

示例：三个方块依次淡入

百度文心百中

百度大模型语义搜索体验中心

查看详情

立即学习“前端免费学习笔记（深入）”；

.box {
  opacity: 0;
  animation: fadeIn 1s forwards;
}

.box:nth-child(1) { animation-delay: 0.2s; }
.box:nth-child(2) { animation-delay: 0.4s; }
.box:nth-child(3) { animation-delay: 0.6s; }

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

登录后复制

说明：forwards 确保动画结束后保持最终状态（opacity: 1），不会回退。