使用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
：
立即学习“前端免费学习笔记（深入）”；
这是一个会渐变透明度的元素。
然后在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修图
绘蛙平台AI修图工具，支持手脚修复、商品重绘、AI扩图、AI换色
285 查看详情
这个属性决定了动画会播放多少次。
数字值：你可以直接给一个数字，比如
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
则在一些需要动画延迟，但又希望元素在延迟期间就“准备好”起始状态的场景下非常有用。
以上就是如何用css animation实现元素透明度渐变的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1071908.html
微信扫一扫 
支付宝扫一扫 
