解决CSS滑入动画元素初始状态可见问题

问题的核心是：在动画延迟启动前，你的bar元素使用默认样式（left:30%且无transform），导致它们在屏幕中间提前显示。要解决这个问题，我们可以利用CSS动画的animation-fill-mode属性，让元素在延迟期间应用动画起始帧的样式，从而保持隐藏状态直到动画开始。

具体修复步骤： #

1. 为每个bar的动画添加animation-fill-mode: both属性（或在动画简写中包含both）。这个属性会让元素在动画延迟期间应用**起始帧（0%）的样式，同时在动画结束后保留结束帧（100%）**的样式，完美匹配你的需求。

2. 清理冗余的动画属性：原代码中animation声明里的infinite和单独设置的animation-iteration-count:1重复，移除infinite即可。

修正后的CSS代码： #

/* Bars Animation CSS */

.bar1 {
  animation: move1 1.5s ease-out 500ms 1 forwards both;
  position: fixed;
  top: 30%;
  margin-bottom: 2px;
  left:  30%;
  z-index: 50;
}

@keyframes move1 {
  0% {
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(-100%);
    left: 80%;
  }
}

.bar2 {
  animation: move2 1.5s ease-out 1000ms 1 forwards both;
  position: fixed;
  top: 36%;
  left:  30%;
  z-index: 999;
}

@keyframes move2 {
  0% {
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(-100%);
    left: 65%;
  }
}

.bar3 {
  animation: move3 1.5s ease-out 1500ms 1 forwards both;
  position: fixed;
  top: 42%;
  left: 30%;
  z-index: 999;
}

@keyframes move3 {
  0% {
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(-100%);
    left: 52%;  
  }
}

原理说明： #

• animation-fill-mode: both 会让元素在动画延迟（比如bar1的500ms）期间，自动应用动画起始帧（0%）的transform: translateX(100vw)样式，将bar完全移出屏幕右侧，避免提前显示。
• 动画启动后，元素会正常执行从起始帧到结束帧的过渡，动画结束后保留结束帧的样式（因为我们保留了forwards）。

这样修改后，页面刷新时三个bar会一直保持隐藏状态，直到各自的延迟时间结束、动画正式启动时才开始滑入。

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