css css 动画怎么做渐隐渐现_通过 opacity 和 keyframes 实现
#技术教程 发布时间： 2026-01-13
opacity动画需配合transition或@keyframes才能生效；仅设opacity:0无过渡效果；@keyframes须定义起止关键帧，如0%、50%、100%；transition适合交互显隐，@keyframes适合完整序列；性能上opacity通常GPU加速，慎用will-change。
opacity 动画必须配合 transition 或 @keyframes 才生效
直接写 opacity: 0 不会自动变透明，也不会“渐”——CSS 不会自己插值。要产生过渡效果，得明确告诉浏览器“这个属性要平滑变化”。两种主流方式：transition 适合简单状态切换（比如 hover 显隐），@keyframes 更适合定义完整动画序列（比如淡入→停留→淡出）。
用 @keyframes 写淡入淡出必须定义至少两个关键帧
只写 from { opacity: 0 } 没用，浏览器不知道终点；只写 to { opacity: 1 } 也不行，起点不明确。标准写法是明确起止，或用百分比控制节奏：
@keyframes fadeInOut {
0% { opacity: 0; }
50% { opacity: 1; }
100% { opacity: 0; }
}
然后通过 animation 属性挂载：
.box {
animation: fadeInOut 2s ease-in-out infinite;
}
-
2s是整个循环耗时（0%→100%） -
ease-in-out让淡入淡出更自然，避免机械感 -
infinite表示无限循环；去掉它就只播一次
opacity 动画性能差？别乱加 will-change
单纯改 opacity 是 CSS 合成属性，浏览器通常能走 GPU 加速，一般不需要优化。但如果你同时动了 transform 和 
opacity，或者在低性能设备上卡顿，可以加：
立即学习“前端免费学习笔记（深入）”；
.box {
will-change: opacity;
}
不过要注意：
-
will-change是提示，不是魔法，滥用反而拖慢渲染 - 不要对大量元素批量加，尤其在滚动区域里
- 动画结束建议用 JS 移除该声明，或用
animationend事件清理
IE 不支持 @keyframes？用 transition + 类名切换更稳妥
IE10+ 支持 @keyframes，但 IE9 及以下完全不认。如果还要兼容老 IE，推荐用 transition 配合 JS 切换类：
.fadeable {
opacity: 1;
transition: opacity 0.3s ease;
}
.fadeable.hidden {
opacity: 0;
}
JS 控制：
element.classList.add('hidden'); // 渐隐
element.classList.remove('hidden'); // 渐显
这种方式兼容性好，逻辑清晰，也方便用 JS 精确控制时机（比如等图片加载完再淡入）。
实际项目中，@keyframes 写法简洁，适合装饰性动效；而 transition + 类控制更适合交互反馈。别为了“酷”堆复杂 keyframes，多数渐隐渐现，一行 transition 就够用。 技术教程SEO
上一篇 : 懂车帝app怎么查看车辆的发动机/电机参数 懂车帝app动力系统数据查询【教程】
下一篇 : Java DOM如何访问ProcessingInstruction节点
-
SEO外包最佳选择国内专业的白帽SEO机构，熟知搜索算法，各行业企业站优化策略！
SEO公司
-
可定制SEO优化套餐基于整站优化与品牌搜索展现，定制个性化营销推广方案！
SEO套餐
-
SEO入门教程多年积累SEO实战案例，从新手到专家，从入门到精通，海量的SEO学习资料！
SEO教程
-
SEO项目资源高质量SEO项目资源，稀缺性外链，优质文案代写，老域名提权，云主机相关配置折扣！
SEO资源
-
SEO快速建站快速搭建符合搜索引擎友好的企业网站，协助备案，域名选择，服务器配置等相关服务！
SEO建站
-
快速搜索引擎优化建议没有任何SEO机构，可以承诺搜索引擎排名的具体位置，如果有，那么请您多注意！专业的SEO机构，一般情况下只能确保目标关键词进入到首页或者前几页，如果您有相关问题，欢迎咨询！
