滚动隐藏scrolldown文本后重现问题求助

问题核心是CSS动画结束后元素会自动回到初始样式，再加上fixed定位的特性，导致滚动到页面下方时文本再次出现。按以下方法修复：

1. 给动画添加animation-fill-mode: forwards #

这个属性能让元素在动画结束后保持最后一帧的状态，不会重置回初始样式。

2. 补全scroll-in关键帧定义 #

你当前代码缺少动画的具体状态变化，需要明确从可见到彻底隐藏的过程：

@keyframes scroll-in {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px); /* 可选：让元素移出视口，避免后续意外显示 */
  }
}

3. 更新.scrolldown的CSS配置 #

把animation-fill-mode: forwards加到动画属性里，伪元素也同步设置：

.scrolldown{
  position: fixed;
  font-size: 10px;
  font-weight: 600;
  left:45px;
  writing-mode: vertical-lr;
  height: 200px;
  bottom:0;
  color: rgba(129, 128, 128, 0.5);
  text-transform: uppercase;
  letter-spacing: 2px;
  z-index: -1;
  width: 30px;
  line-height: 30px;
  animation: scroll-in 1.2s ease-in-out forwards; /* 新增forwards */
  &::after{
    content:"";
    display: block;
    position: absolute;
    width: 1px;
    background-color: rgba(62, 51, 49,0.5);
    opacity:0;
    bottom:0px;
    left:15px;
    animation: scroll-in 1.8s ease-in-out forwards; /* 伪元素同样添加 */
  }
}

如果滚动到底部还是出现，可在动画最后一帧再加pointer-events: none，彻底禁用元素的交互和显示优先级。

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