本文介绍如何仅用 CSS 实现信息栏（info bar）在初始显示 10 秒后自动恢复原始布局（如默认宽度、位置等），无需 JavaScript，通过 @keyframes 动画与 animation-fill-mode: forwards 精准控制样式切换。
本文介绍如何仅用 css 实现信息栏（info bar）在初始显示 10 秒后自动恢复原始布局（如默认宽度、位置等），无需 javascript，通过 `@keyframes` 动画与 `animation-fill-mode: forwards` 精准控制样式切换。
要实现“10 秒后重置样式”的效果，核心思路是：将目标样式变化定义为一段动画，并让动画终点状态恰好等于你期望的“重置后”样式，再通过 animation-fill-mode: forwards 使动画结束后保持最终状态。
注意：CSS 动画本身不能直接“移除”类或回退到未声明的默认样式，因此需显式定义动画的终点（100%）为你要恢复的原始状态。例如，若 .info 初始为固定定位、窄宽、底部靠右，而“重置后”应恢复为静态流式布局、100% 宽度、正常文档流位置，则需在 @keyframes 中明确写出这些属性值。
以下是完整可运行的纯 CSS 方案：
.info {
/* 初始样式：弹出式信息栏 */
background-color: #e2efbb;
padding: 30px 40px;
height: 25%;
width: 18%;
position: fixed;
right: 1.9%;
bottom: 0;
border-radius: 10px;
box-shadow: 0 0 30px #999;
text-align: center;
z-index: 1;
/* 关键：启动动画，延迟 10s 后执行，持续 0.1s（视觉上即瞬时切换） */
animation-name: resetInfoStyle;
animation-duration: 0.1s;
animation-delay: 10s;
animation-fill-mode: forwards; /* ✅ 必须设置，否则动画结束即恢复初始样式 */
}
@keyframes resetInfoStyle {
/* 0%：保持初始状态（可省略，因元素已具该样式） */
0% {
width: 18%;
position: fixed;
right: 1.9%;
bottom: 0;
}
/* 100%：重置为目标状态（即“回归正常”的样式） */
100% {
width: 100%;
position: static;
right: auto;
bottom: auto;
height: auto;
padding: 12px 20px;
border-radius: 0;
box-shadow: none;
}
}
✅ 关键要点说明：
- animation-fill-mode: forwards 是核心——它确保动画结束后，元素永久保留 100% 帧中定义的样式，而非跳回初始状态；
- 动画时长（animation-duration）设为极短（如 0.1s），避免过渡感，实现“瞬间重置”；
- 所有需重置的属性（position, width, right, bottom, height, padding, border-radius, box-shadow）必须在 100% 中完整声明，未声明的属性不会被重置；
- 不依赖 :hover 或其他触发器，动画在页面加载后自动计时启动，符合“10秒后自动恢复”需求；
- 兼容性优秀：现代浏览器（Chrome 4+, Firefox 16+, Safari 5.1+, Edge 12+）均原生支持。
⚠️ 注意事项：
- 若 .info 元素原本有内联样式或更高优先级 CSS 覆盖，需确保动画中的 100% 声明足够强力（必要时可加 !important，但应优先通过选择器权重解决）；
- position: static 会使其脱离 fixed 定位，回归文档流；若需“隐藏”而非“回归”，可改为 opacity: 0; visibility: hidden; 并配合 transition 实现淡出；
- 如需更精细控制（如重置后仍保留部分样式），可在 100% 中只覆盖需变更的属性，其余保持不变。
此方案简洁、可靠、零 JS，是纯 CSS 实现定时样式重置的最佳实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
