使用animation与opacity可实现淡入淡出等透明度动画，通过@keyframes定义关键帧，如fadeIn从opacity:0到1，配合animation属性应用，常用于提示、轮播等场景；注意opacity影响子元素且占布局空间，需隐藏时结合display:none，推荐用opacity做高性能动画，避免频繁切换visibility或display。
在CSS中，
animation
与
opacity
结合使用可以实现平滑的透明度变化动画效果，比如淡入、淡出或循环闪烁。这种组合非常常见于页面加载提示、轮播图切换或按钮交互反馈等场景。
opacity 属性简介
opacity
用于设置元素的透明度，取值范围是
0
（完全透明）到
1
（完全不透明）。它会影响元素本身及其所有子元素的可见性。
例如：
— 元素不可见
— 半透明
— 完全可见
使用 animation 控制 opacity 变化
通过
@keyframes
定义关键帧动画，可以在不同时间点改变元素的
opacity
值，从而实现渐变效果。
立即学习
“
前端免费学习笔记（深入）
”；
Eclipse导入Android或其他的JAVA项目的正确方法 WORD版
本文档主要讲述的是Eclipse导入Android或其他的JAVA项目的正确方法；希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看
下载
示例：实现一个淡入动画
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 2s ease-in-out;
}
这个例子会让 class 为
.element
的元素在2秒内从完全透明变为完全不透明。
常见应用场景与技巧
实际开发中，opacity 动画常与其他属性配合使用，提升视觉体验：
配合 display 使用
：注意
的元素仍然占据布局空间，如果需要彻底隐藏，可在动画结束后设置
（通常通过 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 加速，性能较好，适合频繁使用。避免用
或
做频繁切换。
注意事项
虽然 opacity 动画流畅，但需注意以下几点：
子元素也会跟着变透明，若只想控制背景透明度，应使用
或
颜色值。
动画默认只执行一次，如需重复播放，添加
。
可结合
和
控制动画开始时间和结束状态。
基本上就这些。合理使用 animation 与 opacity，能让你的界面更生动自然。
opacity: 0;opacity: 0.5;opacity: 1;opacity: 0display: nonevisibilitydisplayrgba()hsla()animation-iteration-count: infiniteanimation-delayanimation-fill-mode: forwards