用CSS animation和opacity可实现元素循环呼吸效果。1. 定义@keyframes动画，如fade或fadeInOut，设置0%到100%的透明度变化；2. 将animation属性应用于目标元素，指定动画名称、时长、速度曲线和infinite循环；3. 调整关键帧起始值控制初始状态，实现从可见到渐隐再渐显的呼吸效果，适用于提示图标或加载状态，无需JavaScript即可提升界面动效体验。
想让一个元素在页面上慢慢出现，再慢慢消失，形成循环的呼吸效果？用 CSS 的 animation 和 opacity 就能轻松实现。不需要 JavaScript，只需几行样式代码。
基本原理：利用 opacity 控制透明度
opacity 属性取值范围是 0 到 1，0 表示完全透明，1 表示完全不透明。通过关键帧（@keyframes）定义透明度的变化过程，再绑定到元素上，就能实现渐变动画。
例如，让一个 div 从透明到完全显示再到透明：
@keyframes fade {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
应用动画到元素
写好关键帧后，用 animation 属性将它应用到目标元素。可以控制动画时长、重复次数、速度曲线等。
立即学习“前端免费学习笔记（深入）”；
.fade-element {
width: 100px;
height: 100px;
background: #3498db;
animation: fade 3s ease-in-out infinite;
}
- fade：动画名称，对应 @keyframes 定义的名字
- 3s：动画持续3秒
- ease-in-out：开始和结束较慢，中间较快
- infinite：无限循环播放
调整动画节奏与起始状态
有时你希望元素一开始就是可见的，然后淡出再淡入循环。可以调整 keyframes 的起点：
@keyframes fadeInOut {
0% { opacity: 1; }
50% { opacity: 0.3; }
100% { opacity: 1; }
}
这样看起来像“呼吸”效果，适合提示性图标或加载标识。
还可以使用 animation-delay 延迟启动，或 animation-fill-mode: forwards 保持最后一帧，根据实际需求灵活设置。
基本上就这些。掌握 opacity 和 @keyframes 的配合，就能做出自然流畅的渐显渐隐动画，提升界面交互感。
