如何在CSS中获得无限垂直滚动图像？

我正在尝试添加一个无限垂直滚动的图像，就像亚当·惠特克罗夫特的《神奇》一样。我看过他的源代码，但我不知道他是怎么做到的。这个想法是，“我是科学家”的文字将出现在图像上

我目前的代码是：

<div class="ani">
    <div class="container">
            <img src="img/Gene.png" alt="Scrolling Genes" />
        </div> 
<h3> I'm a scientist. </h3>
    <p> I worked at.... </p>        

至于“容器”：

该代码（可耻地）取自我上面提到的网站。就我个人而言，我不知道如何在文本上方创建滚动图像

---

非常感谢。您的代码很好。您只是忘记了定义动画

@-webkit-keyframes bgscroll {
    from {background-position:0 0;}
    to {background-position:0 -520px;}
}

以下是您想要的示例：

显然，你必须改变你的图片，并定义好动画的高度

@-webkit-keyframes bgscroll {
    from {background-position:0 0;}
    to {background-position:0 -520px;}
}

要获得完整的浏览器支持，请不要忘记添加所有CSS前缀。 更多信息请点击此处： （-wekbit-moz-o）

只需将代码粘贴到以下位置即可轻松完成：

---

希望能有所帮助。

您能告诉我们更多关于此功能的信息吗？也许设置一个JSFIDLE？使用javascript更改标记/图像的像素坐标。保持y坐标不变，改变x坐标。以循环方式执行此操作。他引用的站点使用CSS来实现此效果，而不是javascript。David Barsky，如果您发现以下两个答案中的任何一个有用，请接受其中一个。@DavidBarsky:如果您认为此答案是正确的，那么您可能希望将其标记为正确的。；]有没有一种方法可以使它连续…像动画到顶部，然后再回到底部？要得到这项工作，请确保你有背景重复：重复，没有背景大小属性

@-webkit-keyframes bgscroll {
    from {background-position:0 0;}
    to {background-position:0 -520px;}
}