如何实现弹窗先左滑入场8秒后透明消失的CSS动画？

你的现有代码缺少时间阶段的停留控制，且未指定动画总时长，没法实现“滑入后停留8秒再消失”的需求。下面是修正后的完整方案：

问题点说明 #

原动画在50%阶段就完成滑入，之后直接跳到100%变透明，没有预留8秒的停留时间；同时没设置动画时长，浏览器无法识别各阶段的时间分配逻辑。

修正后的代码实现 #

先给弹窗设置基础定位样式，再调整关键帧和动画属性：

/* 弹窗基础样式 */
.popup {
  position: fixed;
  top: 32px;
  right: -100%; /* 初始状态在屏幕右侧外 */
  padding: 16px 24px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

/* 调整后的动画关键帧 */
@keyframes popup-anim {
  0% {
    right: -100%;
    opacity: 1;
  }
  /* 第1秒完成滑入（总时长10秒的10%） */
  10% {
    right: 32px;
    opacity: 1;
  }
  /* 从第1秒到第9秒，保持显示状态8秒 */
  90% {
    right: 32px;
    opacity: 1;
  }
  /* 最后1秒逐渐透明消失 */
  100% {
    right: 32px;
    opacity: 0;
    visibility: hidden; /* 可选：完全隐藏后不占用交互区域 */
  }
}

/* 给弹窗添加激活类以触发动画 */
.popup.active {
  animation: popup-anim 10s forwards; /* forwards让动画停在最后一帧状态 */
}

关键细节说明 #

• animation: popup-anim 10s forwards：总时长设为10秒，拆分1秒滑入、8秒停留、1秒消失；forwards确保动画结束后不会弹回初始位置。
• 若要调整滑入/消失的速度，修改关键帧的百分比即可：比如想让滑入用0.5秒，就把10%改成5%，停留阶段对应从5%到85%（覆盖8秒），最后85%-100%作为消失时间。
• visibility: hidden是为了避免透明后的弹窗仍能被点击，不需要的话可以删除该属性。

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