Css动画迭代

Question

我正在为jr制作一个javascript老虎机。开发面试测试。我有五个“卷轴”，它们是垂直排列图像的列。这个想法是让列向下滚动，到达最后，并顺利地返回到顶部，以便看起来像流体动画。我知道有JQuery库可以完成繁重的工作，但我想从头开始编写我的代码。我目前的想法是使用CSS动画和关键帧以流畅的方式滚动到列的底部，并使用JQuery启动动画。有没有办法让动画顺利跳回到列的顶部以创建所需的效果？

Answer 1

如果你想让一个关键帧返回到它之前的状态而不会从图像底部跳回（在这种情况下）回到顶端。利用关键帧内的％值。 @keyframes Animation{ 0% {postion: 0;} 25% {postion: 20;} 50% {postion: 40;} 75% {postion: 20;} 100% {postion: 0;} } 不得不临时凑合css，因为我不知道跳你实际上移动img。

通过这种方式，整个动画在最后自动重置，从而允许进行进一步的迭代而没有视觉跳跃。