Html 仅在使用CSS加载页面时向下滑动并停止

我正试图得到一条快闪信息，从页面顶部滑下，在

top:100px处结束

我的CSS做得很正确，但是在动画运行完之后，它会恢复到
top:0px

我需要它保持在100px，直到用户关闭它，这是与JS完成后。
但是，我希望幻灯片只使用CSS

这是我的CSS:

.flash-messages {
  &__wrapper {
    position: absolute;
    width: 40%;
    left: 30%;
    background: rgba(128, 128, 128, 0.85);
    margin: 50px;
    overflow: visible;
    padding: 0;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-name: fadeOut;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-name: fadeOut;

    div p {
      color: white;
      font-size: 25px;
      text-align: center;
    }
  }
}


@-webkit-keyframes fadeOut {
    0%      { -webkit-transform: translateY(0%); }
    100% {-webkit-transform: translateY(100px) }
}

以下是HTML：

<div class="flash-messages__wrapper">
    <div class="flash-messages__close"></div>
    <div n:foreach="$flashes as $flash" n:class="flash, $flash->type">
        <p>{$flash->message}</p>
    </div>
</div>


{$flash->message}


有什么建议吗？
这可能有用。我使用的是
top
而不是
transform
，并且在完成
动画后
元素返回到其原始状态，因此在
中使用
top:100px
。flash-messages\uu包装器


.flash-messages\uuu包装器{
位置：绝对位置；
宽度：40%；
左：30%；
背景：rgba（128,128,128,0.85）；
利润率：50像素；
溢出：可见；
填充：0；
-webkit动画持续时间：1s；
-webkit动画计时功能：轻松输入输出；
-webkit动画迭代计数：1；
-webkit动画名称：淡出；
动画持续时间：1s；
动画计时功能：轻松进出；
动画迭代次数：1；
动画名称：淡出；
顶部：100px；
}
.flash-messages\uuuu包装器div p{
颜色：白色；
字体大小：25px；
文本对齐：居中；
}
@-webkit关键帧淡出{
0% {
排名：0；
}
100% {
顶部：100px；
}
}

{$flash->message}

这可能有效。我使用的是
top
而不是
transform
，并且在完成
动画后
元素返回到其原始状态，因此在
中使用
top:100px
。flash-messages\uu包装器


.flash-messages\uuu包装器{
位置：绝对位置；
宽度：40%；
左：30%；
背景：rgba（128,128,128,0.85）；
利润率：50像素；
溢出：可见；
填充：0；
-webkit动画持续时间：1s；
-webkit动画计时功能：轻松输入输出；
-webkit动画迭代计数：1；
-webkit动画名称：淡出；
动画持续时间：1s；
动画计时功能：轻松进出；
动画迭代次数：1；
动画名称：淡出；
顶部：100px；
}
.flash-messages\uuuu包装器div p{
颜色：白色；
字体大小：25px；
文本对齐：居中；
}
@-webkit关键帧淡出{
0% {
排名：0；
}
100% {
顶部：100px；
}
}

{$flash->message}

当您将元素从一种状态移动到另一种状态时，使用它们比动画效果更好。当您将元素从一种状态移动到另一种状态时，使用它们比动画效果更好。