使用css动画可在10秒后无缝还原信息栏的原始布局（如宽度、高度、位置等），无需javascript，兼容所有现代浏览器。
使用css动画可在10秒后无缝还原信息栏的原始布局（如宽度、高度、位置等），无需javascript，兼容所有现代浏览器。
要实现信息栏（.info）在页面加载后保持初始样式10秒，随后自动恢复为“正常状态”（例如：脱离fixed定位、回归文档流、重设宽高与位置），纯CSS方案的核心在于利用 animation-fill-mode: forwards 配合关键帧动画，将样式从“临时状态”过渡回“默认状态”。
但需注意：您当前的 .info 样式本身已是“弹出态”（position: fixed; right: 1.9%; bottom: 0; width: 18%; height: 25%）。所谓“重置为正常”，实际是指退回到未添加该样式前的自然布局状态——即移除 position: fixed、right/bottom、并恢复为 static 定位下的默认宽高（如 width: auto; height: auto; 等）。由于CSS无法直接“删除”声明，我们采用动画终点（100%）覆盖为期望的常规样式值来模拟重置效果。
✅ 推荐实现方式（纯CSS，无JS）：
/* 基础默认状态（即“重置后”的样子） */
.info {
/* 这里定义你希望10秒后呈现的“正常”样式 */
position: static;
width: auto;
height: auto;
right: auto;
bottom: auto;
margin: 0;
/* 其他需还原的属性也在此设置 */
}
/* 触发10秒后自动切换的动画 */
.info.reset-after-10s {
animation-name: resetInfoBar;
animation-duration: 0s; /* 立即跳转到终点，无过渡动画 */
animation-delay: 10s;
animation-fill-mode: forwards; /* 保持100%处的样式 */
}
@keyframes resetInfoBar {
0% {
/* 起始态 = 当前你定义的弹出样式 */
position: fixed;
width: 18%;
height: 25%;
right: 1.9%;
bottom: 0;
background-color: #e2efbb;
padding: 30px 40px;
border-radius: 10px;
box-shadow: 0 0 30px #999;
text-align: center;
z-index: 1;
}
100% {
/* 终点态 = 你期望的“正常”状态（可自由定制） */
position: static;
width: auto;
height: auto;
right: auto;
bottom: auto;
margin: 0;
padding: 12px 20px; /* 可选：微调内边距以适配常规文本 */
background-color: #f8f9fa;
border-radius: 4px;
box-shadow: none;
}
}
? HTML中只需为元素添加初始类：
<div class="info reset-after-10s"> 这是一条提示信息 </div>
⚠️ 重要注意事项：
- animation-duration: 0s 确保10秒后瞬间切换，无过渡过程；若需平滑退回，可设为 1s 并调整 @keyframes 中的中间状态。
- animation-fill-mode: forwards 是关键——它使动画结束后永久保留100%定义的样式，而非恢复初始状态。
- 所有参与动画的CSS属性（如 position, width, right 等）必须在 @keyframes 的 0% 和 100% 中显式声明，否则可能失效。
- 浏览器兼容性极佳：CSS Animations 自 IE10+、Chrome 4+、Firefox 16+、Safari 5.1+ 全面支持（caniuse数据）。
? 进阶提示：若需动态控制（如用户点击立即重置），可结合 :hover 或通过JavaScript切换类名（如 classList.remove('reset-after-10s')），但本方案严格满足“CSS only”需求。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
