使用CSS animation与@keyframes可实现精确控制的透明度渐变，支持多阶段变化、自动播放、无限循环及复杂缓动效果，相比transition更适用于无需交互触发、需循环或组合的动画场景；通过animation-iteration-count和animation-direction可控制循环次数与播放方向，配合animation-fill-mode可决定动画结束后元素是否保持最终状态或恢复初始样式，从而创建流畅自然的视觉效果。
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
(循环次数)
这个属性决定了动画会播放多少次。
-
数字值：你可以直接给一个数字，比如
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%样式 */ }
理解并合理运用
animation-fill-mode对于创建流畅、符合预期的用户体验至关重要。我个人在做一些引导性动画时，经常会用到
forwards，确保用户看到动画结束后的最终状态，而不是突然‘闪’回原样，那体验可真不好。而
backwards则在一些需要动画延迟，但又希望元素在延迟期间就“准备好”起始状态的场景下非常有用。
