css css 动画怎么做渐隐渐现_通过 opacity 和 keyframes 实现

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 就够用。