请多多包涵，因为几年前我头部受伤，所以我在学习新事物时有点慢，但是我对html有基本的了解，可以通过反复试验弄清楚一些事情。
我正试图将文本注释转换成滚动字幕，就像在电影结尾一样。我已经尝试了一些免费的开源电影剪辑软件，但是我不喜欢这些限制，因此买不起专业人士的东西。
我已经控制了所有的颜色和文本，我希望它以视觉方式显示，但是它停止并且循环在结束之前重新开始。我正在尝试几百到几千行。
我是否缺少某些内容，或者在从顶部重新开始之前可以显示的行数或字符数是否受到限制？我更改了它，请感觉到改变了速度，这样您就不必再经历整个过程了。修复或建议其他方法的任何帮助将不胜感激。
这是我到目前为止所拥有的。
@font-face {
font-family: Abadi MT Condensed
}
body {
background-color: #BBBBBB;
overflow: hidden;
}
.wrapper {
position: absolute;
top: 100%;
left: 10%;
width: 1600px;
margin-left: -100px;
font-family: Abadi MT Condensed;
text-align: left;
color: #fff;
animation: 15s credits linear infinite;
animation-delay: 1s;
}
.video_title {
margin-bottom: 50px;
font-size: 80px;
text-shadow: 2px 2px #878787;
letter-spacing: 0px;
text-outline: #304345;
text-decoration: none;
}
.job_title {
margin-bottom: 5px;
font-size: 30px;
text-shadow: 2px 2px #878787;
}
.person_name {
margin-bottom: 20px;
font-size: 50px;
font-variant: small-caps;
text-shadow: 2px 2px #878787;
}
@keyframes credits {
0% {
top: 100%;
}
100% {
top: -500%;
}
}<div class="wrapper">
<div class="person_name">
<p>
<div class="job_title">IN THE BEGINNING..........
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah10
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah20
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah30
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah40
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah50
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah60
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah70
<p>blah71
<p>blah72
<p>blah73
<p>blah74
<p>blah75
<p>blah76
<p>blah77
<p>**********************blah78 it cuts off at this line
<p>blah79
<p>blah80
<p>blah83
<p>blah84
<p>blah85
<p>blah86
<p>blah87
<p>blah88
<p>blah89
<p>blah90
<p>blah91
<p>blah92
<p>blah93
<p>blah94
<p>blah95
<p>blah96
<p>blah67
<p>blah98
<p>blah99
<p>blah100
<p>blah101
<p>blah102
<p>blah103
<p>blah104
<p>blah105
<p>blah106
<p>blah107
<p>
</div>
</div>
答案 0 :(得分：1)
好吧，您只能将内容滚动最多500％（是其父级大小的5倍），但实际上大约是7000像素高。这就是为什么它永远不会一直向下滚动，而是在达到500％时跳回原来的原因。
我添加了一个outer-wrapper，它的高度固定为200px。您要滚动的内容大约是包装器的35倍，这意味着我们需要将最后一帧的top设置为35000%。我将其设置为36000%只是为了确保最后一行也滚动到看不见为止。
在下面尝试一下。
如果我建议的话，使用JavaScript将为您提供更多选择和更“干净”的方式。现在，您需要根据内容来计算和硬编码所有值，这并不是很好的做法。
顺便说一句，您并没有关闭<p>标签；）
@font-face {
font-family: Abadi MT Condensed
}
body {
background-color: #BBBBBB;
overflow: hidden;
}
.outer-wrapper {
position: relative;
height: 200px;
}
.wrapper {
position: absolute;
top: 100%;
left: 10%;
width: 1600px;
margin-left: -100px;
font-family: Abadi MT Condensed;
text-align: left;
color: #fff;
animation: 15s credits linear infinite;
animation-delay: 1s;
}
.video_title {
margin-bottom: 50px;
font-size: 80px;
text-shadow: 2px 2px #878787;
letter-spacing: 0px;
text-outline: #304345;
text-decoration: none;
}
.job_title {
margin-bottom: 5px;
font-size: 30px;
text-shadow: 2px 2px #878787;
}
.person_name {
margin-bottom: 20px;
font-size: 50px;
font-variant:small-caps;
text-shadow: 2px 2px #878787;
}
@keyframes credits {
0% {
top: 100%;
}
100% {
top: -3600%;
}
}<div class="outer-wrapper">
<div class="wrapper">
<div class="person_name"><p>
<div class="job_title">IN THE BEGINNING..........
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah10
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah20
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah30
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah40
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah50
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah60
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah
<p>blah70
<p>blah71
<p>blah72
<p>blah73
<p>blah74
<p>blah75
<p>blah76
<p>blah77
<p>**********************blah78 it cuts off at this line
<p>blah79
<p>blah80
<p>blah83
<p>blah84
<p>blah85
<p>blah86
<p>blah87
<p>blah88
<p>blah89
<p>blah90
<p>blah91
<p>blah92
<p>blah93
<p>blah94
<p>blah95
<p>blah96
<p>blah67
<p>blah98
<p>blah99
<p>blah100
<p>blah101
<p>blah102
<p>blah103
<p>blah104
<p>blah105
<p>blah106
<p>blah107
<p></div>
</div>
</div>