如何用css animation实现元素透明度渐变-css教程-PHP中文网

使用CSS animation与@keyframes可实现精确控制的透明度渐变，支持多阶段变化、自动播放、无限循环及复杂缓动效果，相比transition更适用于无需交互触发、需循环或组合的动画场景；通过animation-iteration-count和animation-direction可控制循环次数与播放方向，配合animation-fill-mode可决定动画结束后元素是否保持最终状态或恢复初始样式，从而创建流畅自然的视觉效果。

如何用css animation实现元素透明度渐变

CSS

animation

登录后复制

结合

@keyframes

登录后复制

规则，是实现元素透明度平滑渐变的有效方法。它允许我们精确定义一个元素在不同时间点上的

opacity

登录后复制

值，从而创造出从完全透明到不透明，或者反向的视觉效果，且整个过程可以被精细控制，例如持续时间、缓动函数、循环次数等。

解决方案

要实现元素的透明度渐变，核心在于使用

@keyframes

登录后复制

定义动画序列，然后通过

animation

登录后复制

属性将这个动画应用到目标元素上。

首先，我们定义一个

@keyframes

登录后复制

规则，比如命名为

fadeEffect

登录后复制

。在这个规则中，指定

opacity

登录后复制

属性在动画不同阶段（例如

0%

登录后复制

和

100%

登录后复制

）的值。

@keyframes fadeEffect {
  0% {
    opacity: 0; /* 动画开始时完全透明 */
  }
  100% {
    opacity: 1; /* 动画结束时完全不透明 */
  }
}

/* 如果需要从不透明到透明 */
@keyframes fadeOutEffect {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

登录后复制

接着，将这个动画应用到一个HTML元素上，例如一个

div

登录后复制

：

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

<div class="my-fading-element">
  这是一个会渐变透明度的元素。
</div>

登录后复制

然后在CSS中，为这个元素指定

animation

登录后复制

属性：

.my-fading-element {
  animation-name: fadeEffect; /* 指定动画名称 */
  animation-duration: 2s; /* 动画持续时间为2秒 */
  animation-timing-function: ease-in-out; /* 动画速度曲线，平滑开始和结束 */
  animation-delay: 0.5s; /* 动画开始前的延迟 */
  animation-iteration-count: 1; /* 动画播放一次 */
  animation-fill-mode: forwards; /* 动画结束后保持最终状态 */
}

登录后复制

这里

animation

登录后复制

是一个复合属性，包含了多个子属性：

```
animation-name
```
登录后复制
: 引用
```
@keyframes
```
登录后复制
规则的名称。
```
animation-duration
```
登录后复制
: 动画完成一个周期所需的时间。
```
animation-timing-function
```
登录后复制
: 动画的缓动函数，如
```
linear
```
登录后复制
(匀速),
```
ease
```
登录后复制
(慢-快-慢),
```
ease-in
```
登录后复制
(慢速开始),
```
ease-out
```
登录后复制
(慢速结束),
```
ease-in-out
```
登录后复制
(慢速开始和结束)。
```
animation-delay
```
登录后复制
: 动画开始前的延迟时间。
```
animation-iteration-count
```
登录后复制
: 动画重复的次数，
```
infinite
```
登录后复制
表示无限循环。
```
animation-direction
```
登录后复制
: 动画播放方向，
```
normal
```
登录后复制
(正向),
```
reverse
```
登录后复制
(反向),
```
alternate
```
登录后复制
(交替正反向),
```
alternate-reverse
```
登录后复制
(交替反正向)。
```
animation-fill-mode
```
登录后复制
: 动画播放前后元素样式如何保持，
```
forwards
```
登录后复制
(保持最终状态),
```
backwards
```
登录后复制
(动画开始前应用第一帧样式),
```
both
```
登录后复制
(兼顾前后),
```
none
```
登录后复制
(默认，动画结束后恢复初始样式)。

通过调整这些属性，就能实现各种复杂的透明度渐变效果。

为什么不直接用 CSS

transition

登录后复制

？

animation

登录后复制

在透明度渐变上有什么独到之处？

确实，很多人在想到透明度渐变时，首先会想到

transition

登录后复制

。它确实能快速实现，比如鼠标悬停时透明度变化。但

animation

登录后复制

和

transition

登录后复制

在设计哲学和应用场景上有着本质的区别。

transition

登录后复制

更像是对元素“状态变化”的响应。当你给一个元素添加或移除一个类，或者它的某个属性（比如

opacity

登录后复制

）因为

hover

登录后复制

或

focus

登录后复制

等伪类而改变时，

transition

登录后复制

会让这个变化过程变得平滑。它依赖于一个起始状态和一个结束状态，中间的过程由浏览器负责补间。所以，如果你只是想在特定用户交互后让元素透明度发生一次变化，

transition

登录后复制

简单直接，非常高效。

然而，

animation

登录后复制

则提供了更高级、更独立的控制能力。它不依赖于元素状态的直接变化，而是可以独立地、在特定时间轴上定义一系列关键帧，让元素按照预设的“剧本”自动播放。这意味着：

多阶段变化：
```
animation
```
登录后复制
可以定义
```
0%
```
登录后复制
、
```
25%
```
登录后复制
、
```
50%
```
登录后复制
、
```
75%
```
登录后复制
、
```
100%
```
登录后复制
等多个关键帧，让透明度在整个动画过程中呈现出非线性的、更复杂的渐变模式。比如，先快速变透明，再缓慢变不透明，这在
```
transition
```
登录后复制
中很难直接实现。
自动播放与循环：
```
animation
```
登录后复制
可以设置
```
animation-delay
```
登录后复制
让它在页面加载后自动播放，也可以通过
```
animation-iteration-count: infinite
```
登录后复制
实现无限循环，而
```
transition
```
登录后复制
通常需要一个触发事件。
更丰富的控制：除了透明度，
```
animation
```
登录后复制
还能同时控制其他多个CSS属性，比如位置、大小、颜色等，创造出更复杂的组合动画效果。
独立性：
```
animation
```
登录后复制
可以在元素加载时就启动，或者通过 JavaScript 精确控制播放、暂停、反向等，而
```
transition
```
登录后复制
通常是“被动”响应。

举个例子，如果我想做一个“呼吸灯”效果，让一个元素的透明度周期性地从完全透明到完全不透明，再从完全不透明到完全透明，无限循环。用

transition

登录后复制

几乎是不可能的，你得写很多 JavaScript 来不断切换类。但用

animation

登录后复制

，只需要几行CSS就能搞定：

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

.breathing-element {
  animation: breath 3s ease-in-out infinite alternate;
}

登录后复制

这种能力是

transition

登录后复制

无法比拟的，它让动画更具表现力和自主性。

如何控制透明度渐变的循环次数和播放方向？

控制动画的循环次数和播放方向是

animation

登录后复制

的强大之处，这主要通过

animation-iteration-count

登录后复制

和

animation-direction

登录后复制

这两个属性来实现。

animation-iteration-count

登录后复制

(循环次数)

腾讯元宝

腾讯混元平台推出的AI助手

223

查看详情

这个属性决定了动画会播放多少次。

数字值：你可以直接给一个数字，比如
```
3
```
登录后复制
，动画就会播放三次然后停止。
```
.element-play-thrice {
  animation: fadeEffect 2s ease-in-out 3; /* 播放3次 */
}
```
登录后复制
infinite
登录后复制
：这是最常用的一个值，表示动画会无限循环播放，永不停止。这对于背景动画、加载指示器或者前面提到的“呼吸灯”效果非常有用。
```
.element-loop-endlessly {
  animation: fadeEffect 2s ease-in-out infinite; /* 无限循环 */
}
```
登录后复制

我个人在做一些背景装饰性元素时，经常会用到

infinite

登录后复制

，让它们在页面上保持一种微妙的动态感，不会显得太死板。

animation-direction

登录后复制

(播放方向)

这个属性控制动画在每次循环时是正向播放还是反向播放。

```
normal
```
登录后复制
(默认值)：动画总是从
```
0%
```
登录后复制
播放到
```
100%
```
登录后复制
。如果
```
animation-iteration-count
```
登录后复制
大于1，每次循环都会重复这个过程。
```
.element-normal-direction {
  animation: fadeEffect 2s ease-in-out infinite normal; /* 每次都从0%到100% */
}
```
登录后复制

reverse

登录后复制

：动画总是从

100%

登录后复制

播放到

0%

登录后复制

。

.element-reverse-direction {
  animation: fadeEffect 2s ease-in-out infinite reverse; /* 每次都从100%到0% */
}

登录后复制

```
alternate
```
登录后复制
：这个值非常有趣，它让动画在每次循环时交替改变方向。第一次从
```
0%
```
登录后复制
到
```
100%
```
登录后复制
，第二次从
```
100%
```
登录后复制
到
```
0%
```
登录后复制
，第三次又从
```
0%
```
登录后复制
到
```
100%
```
登录后复制
，依此类推。这特别适合创建那种平滑的来回运动或渐变效果，避免了动画结束时突然“跳回”起始状态的生硬感。
```
.element-alternate-direction {
  animation: fadeEffect 2s ease-in-out infinite alternate; /* 来回交替播放 */
}
```
登录后复制
我发现
```
alternate
```
登录后复制
配合
```
infinite
```
登录后复制
简直是为那种“呼吸灯”效果量身定制的，那种缓缓出现又缓缓消失的感觉，特别有生命力，视觉上非常流畅。

alternate-reverse

登录后复制

：与

alternate

登录后复制

类似，但第一次循环是从

100%

登录后复制

播放到

0%

登录后复制

，然后交替。

.element-alternate-reverse-direction {
  animation: fadeEffect 2s ease-in-out infinite alternate-reverse; /* 先反向，再交替 */
}

登录后复制

通过组合这些属性，你可以对透明度渐变的循环和方向进行极其灵活的控制，满足几乎所有动画场景的需求。

渐变动画结束后，如何让元素保持在最终状态或返回初始状态？

动画结束后元素的样式表现，是由

animation-fill-mode

登录后复制

属性来决定的。这个属性非常关键，因为它直接影响用户在动画结束后看到的元素状态，避免了动画突然“闪回”或“闪现”的问题。

animation-fill-mode

登录后复制

有四个主要的值：

```
none
```
登录后复制
(默认值)：这是默认行为。动画结束后，元素会立即恢复到动画开始前的原始样式。这意味着如果你定义了一个从
```
opacity: 0
```
登录后复制
到
```
opacity: 1
```
登录后复制
的动画，当动画播放完毕，元素会立刻变回
```
opacity: 0
```
登录后复制
（假设这是它的原始样式），这在某些情况下可能会显得有些突兀。
```
.element-none-fill {
  opacity: 0; /* 初始状态 */
  animation: fadeEffect 2s ease-in-out 1 none; /* 动画结束后恢复opacity: 0 */
}
```
登录后复制
```
forwards
```
登录后复制
：这是我个人在做引导性动画时最常用的一个值。它指示动画在播放结束后，元素会保持其在动画的最后一个关键帧所定义的样式。如果你的动画是从
```
opacity: 0
```
登录后复制
渐变到
```
opacity: 1
```
登录后复制
，那么设置
```
forwards
```
登录后复制
后，动画结束后元素会保持
```
opacity: 1
```
登录后复制
。这对于确保用户看到动画结束后的最终状态，而不是突然“闪”回原样，体验会好很多。
```
.element-forwards-fill {
  opacity: 0; /* 初始状态 */
  animation: fadeEffect 2s ease-in-out 1 forwards; /* 动画结束后保持opacity: 1 */
}
```
登录后复制
```
backwards
```
登录后复制
：这个值稍微有些特殊。它会在动画开始前，将元素应用动画的第一个关键帧所定义的样式。然后，动画会从这个状态开始播放。当动画结束后，元素会恢复到动画开始前的原始样式（类似于
```
none
```
登录后复制
）。举例来说，如果你的元素初始是
```
opacity: 1
```
登录后复制
，动画
```
fadeEffect
```
登录后复制
的
```
0%
```
登录后复制
关键帧是
```
opacity: 0
```
登录后复制
。设置
```
backwards
```
登录后复制
后，在动画真正开始播放前，元素会瞬间变成
```
opacity: 0
```
登录后复制
，然后从
```
opacity: 0
```
登录后复制
渐变到
```
opacity: 1
```
登录后复制
。这个属性在处理动画延迟时特别有用，可以确保在延迟期间，元素就已经处于动画的起始状态。
```
.element-backwards-fill {
  opacity: 1; /* 初始状态 */
  animation: fadeEffect 2s ease-in-out 1 backwards; /* 动画开始前应用opacity: 0 */
}
```
登录后复制
```
both
```
登录后复制
：这个值是
```
forwards
```
登录后复制
和
```
backwards
```
登录后复制
的结合。它既会在动画开始前应用第一个关键帧的样式（如果设置了
```
animation-delay
```
登录后复制
），又会在动画结束后保持最后一个关键帧的样式。
```
.element-both-fill {
  opacity: 1; /* 初始状态 */
  animation: fadeEffect 2s ease-in-out 0.5s 1 both; /* 延迟期间应用0%样式，结束后保持100%样式 */
}
```
登录后复制