如何仅用CSS实现10秒后重置Info Bar的样式至初始状态？

可以通过CSS关键帧动画（@keyframes）配合animation属性实现这个需求，完全不需要JavaScript。具体实现步骤如下：

• 先定义一个关键帧动画，明确初始状态（你当前设置的固定定位、尺寸）和10秒后的目标状态（你需要的“正常位置与宽度”）。
• 给.info元素添加动画属性，设置时长为10秒，让动画结束后保持最终样式。

代码示例 #

.info {
  /* 保留不需要重置的基础样式 */
  background-color : #e2efbb;
  padding          : 30px 40px;
  border-radius    : 10px;
  box-shadow       : 0px 0px 30px #999;
  text-align       : center;
  z-index          : 1;
  /* 绑定动画：动画名称、时长、结束后保持最终状态 */
  animation: resetInfo 10s forwards;
}

/* 定义关键帧动画 */
@keyframes resetInfo {
  /* 0%为初始状态，对应你当前的样式 */
  0% {
    height: 25%;
    width: 18%;
    position: fixed;
    right: 1.9%;
    bottom: 0px;
  }
  /* 100%为10秒后的正常状态，请根据实际需求调整这些属性 */
  100% {
    height: auto;
    width: auto;
    position: relative;
    right: auto;
    bottom: auto;
  }
}

关键说明 #

• forwards关键字是核心：它会让动画结束后停在100%关键帧的样式上，不会回弹到初始状态。
• 你需要根据实际的“正常状态”修改100%中的属性：比如正常宽度是100%就把width: auto改成width: 100%，正常位置在顶部就调整position和top属性等。
• 动画会从页面加载时开始计时，10秒后自动完成样式切换。

内容的提问来源于stack exchange，提问作者Dalia