Css 在div顶部停止关键帧动画？

我在404页面上使用，但我需要（短）文本停止，并在到达页面顶部时保持可见，而不是一直向上滚动。我如何用CSS实现这一点？我希望使用尽可能少的js。

我对代码库做了一些改动，但基本上你想从

幻灯片

动画中删除

无限

，并在其位置添加

向前

（这是一个错误）。然后，您希望将动画中的

top

值替换为

top:0%

。最后，您需要删除

#titles:after

上的黑色淡入淡出，这可以通过完全删除或降低其不透明度来完成。仍然需要工作，但这是总体思路（必须在“完整页面”模式下运行）：

@导入url(http://fonts.googleapis.com/css?family=Droid+Sans:400700）；
*{填充：0；边距：0；}
正文，html
{
宽度：100%；
身高：100%；
字体系列：“Droid Sans”，arial，verdana，无衬线；
字号：700；
颜色：#ff6；
背景色：#000；
溢出：隐藏；
}
p#开始
{
位置：相对位置；
宽度：16em；
字体大小：200%；
字体大小：400；
利润率：20%自动；
颜色：#4ee；
不透明度：0；
z指数：1；
-webkit动画：简介2放松；
-moz动画：简介2放松；
-ms动画：简介2放松；
-o-动画：介绍2放松；
动画：介绍2放松；
}
@-webkit关键帧简介{
0%{不透明度：1；}
90%{不透明度：1；}
100%{不透明度：0；}
}
@-moz关键帧简介{
0%{不透明度：1；}
90%{不透明度：1；}
100%{不透明度：0；}
}
@-ms关键帧简介{
0%{不透明度：1；}
90%{不透明度：1；}
100%{不透明度：0；}
}
@-o-关键帧简介{
0%{不透明度：1；}
90%{不透明度：1；}
100%{不透明度：0；}
}
@关键帧简介{
0%{不透明度：1；}
90%{不透明度：1；}
100%{不透明度：0；}
}
h1
{
位置：绝对位置；
宽度：2.6em；
左：50%；
最高：25%；
字号：10em；
文本对齐：居中；
左边距：-1.3em；
线高：0.8em；
字母间距：-0.05em；
颜色：#000；
文本阴影：-2px-2px 0#ff6，2px-2px 0#ff6，-2px 2px 0#ff6，2px 2px 0#ff6；
不透明度：0；
z指数：1；
-webkit动画：logo 5s放松2.5s；
-moz动画：logo 5s放松2.5s；
-ms动画：logo 5s放松2.5s；
-o-动画：徽标5s放松2.5s；
动画：logo 5s放松2.5s；
}
h1接头
{
显示：块；
字体大小：0.3em；
字母间距：0；
线高：0.8em；
}
@-webkit关键帧徽标{
0%{-webkit变换：比例（1）；不透明度：1；}
50%{不透明度：1；}
100%{-webkit变换：比例（0.1）；不透明度：0；}
}
@-moz关键帧徽标{
0%{moz变换：比例（1）；不透明度：1；}
50%{不透明度：1；}
100%{-moz变换：比例（0.1）；不透明度：0；}
}
@-ms关键帧徽标{
0%{-ms变换：比例（1）；不透明度：1；}
50%{不透明度：1；}
100%{-ms变换：比例（0.1）；不透明度：0；}
}
@-o关键帧徽标{
0%{-o变换：比例（1）；不透明度：1；}
50%{不透明度：1；}
100%{-o变换：比例（0.1）；不透明度：0；}
}
@关键帧标志{
0%{变换：比例（1）；不透明度：1；}
50%{不透明度：1；}
100%{变换：比例（0.1）；不透明度：0；}
}
/*有趣的3D滚动的东西*/
#头衔
{
位置：绝对位置；
宽度：18em；
高度：10公分；
底部：0；
左：50%；
左边距：-9em；
字体大小：350%；
文本对齐：对齐；
溢出：隐藏；
-webkit转换来源：50%100%；
-moz变换原点：50%100%；
-ms转换来源：50%100%；
-o-变换原点：50%100%；
变换原点：50%100%；
-webkit变换：透视（300px）旋转（25度）；
-莫兹变换：透视（300px）旋转（25度）；
-ms变换：透视（300px）旋转（25度）；
-o变换：透视（300px）旋转（25度）；
变换：透视（300px）旋转（25度）；
}
#标题：之后
{
位置：绝对位置；
内容：''；
左：0；
右：0；
排名：0；
底部：60%；
背景图像：-webkit线性渐变（顶部，rgba（0,0,0,0.5）0%，透明100%）；
背景图像：-moz线性梯度（顶部，rgba（0,0,0,0.5）0%，透明100%）；
背景图像：-ms线性梯度（顶部，rgba（0,0,0,0.5）0%，透明100%）；
背景图像：-o-线性梯度（顶部，rgba（0,0,0,0.5）0%，透明100%）；
背景图像：线性梯度（顶部，rgba（0,0,0,0.5）0%，透明100%）；
指针事件：无；
}
#标题p
{
文本对齐：对齐；
保证金：0.8em0；
}
#标题体育中心
{
文本对齐：居中；
}
#标题a
{
颜色：#ff6；
文字装饰：下划线；
}
#标题内容
{
位置：绝对位置；
最高：100%；
宽度：100%；
-webkit动画：向前滚动10s线性4s；
-moz动画：向前滚动10s线性4s；
-ms动画：向前滚动10s线性4s；
-o型动画：向前滚动10s线性4s；
动画：向前滚动10s线性4s；
}
/*动画*/
@-webkit关键帧滚动{
0%{顶部：100%；}
100%{顶部：0%}
}
@-moz关键帧滚动{
0%{顶部：100%；}
100%{顶部：0%}
}
@-ms关键帧滚动{
0%{顶部：100%；}
100%{顶部：0%}
}
@-o关键帧滚动{
0%{顶部：100%；}
100%{顶部：0%}
}
@关键帧滚动{
0%{顶部：100%；}
100%{顶部：0%}
}

不久前在浏览器中非常非常接近&hellip
CSS3中的星纹织物
错误404
未找到页面

这就像一个符咒！非常感谢你！现在我只需要摆弄一下，让它更具响应性。为了它的价值，这是我的代码笔，用于我正在做的工作（仍在努力使BB8动画正常）：@LauraSage lol nice！在视差和动画方面做得很好。祝你的项目好运。