使用animation与opacity可实现淡入淡出等透明度动画，通过@keyframes定义关键帧，如fadeIn从opacity:0到1，配合animation属性应用，常用于提示、轮播等场景；注意opacity影响子元素且占布局空间，需隐藏时结合display:none，推荐用opacity做高性能动画，避免频繁切换visibility或display。
在CSS中，animation 与 opacity 结合使用可以实现平滑的透明度变化动画效果，比如淡入、淡出或循环闪烁。这种组合非常常见于页面加载提示、轮播图切换或按钮交互反馈等场景。
opacity 属性简介
opacity 用于设置元素的透明度，取值范围是 0（完全透明）到 1（完全不透明）。它会影响元素本身及其所有子元素的可见性。
例如：
opacity: 0; — 元素不可见opacity: 0.5; — 半透明opacity: 1; — 完全可见
使用 animation 控制 opacity 变化
通过 @keyframes 定义关键帧动画，可以在不同时间点改变元素的 opacity 值，从而实现渐变效果。
立即学习“前端免费学习笔记（深入）”；
示例：实现一个淡入动画
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s ease-in-out;
}
这个例子会让 class 为 .element 的元素在2秒内从完全透明变为完全不透明。
常见应用场景与技巧
实际开发中，opacity 动画常与其他属性配合使用，提升视觉体验：
-
配合 display 使用：注意
opacity: 0的元素仍然占据布局空间，如果需要彻底隐藏，可在动画结束后设置display: none（通常通过 JavaScript 控制）。 -
反向动画（淡出）：
@keyframes fadeOut {
0% { opacity: 1; }
100% { opacity: 0; }
} -
循环闪烁：可用于提示用户注意某个区域。
@keyframes blink {
0%, 50% { opacity: 1; }
50.1%, 100% { opacity: 0; }
}
.alert { animation: blink 1s infinite; } -
性能优化：opacity 动画由 GPU 加速，性能较好，适合频繁使用。避免用
visibility或display做频繁切换。
注意事项
虽然 opacity 动画流畅，但需注意以下几点：
- 子元素也会跟着变透明，若只想控制背景透明度，应使用
rgba()或hsla()颜色值。 - 动画默认只执行一次，如需重复播放，添加
animation-iteration-count: infinite。 - 可结合
animation-delay和animation-fill-mode: forwards控制动画开始时间和结束状态。
