html - 我如何使用 translateY 或 marquee 垂直动画列表菜单？

Question

我正在尝试复制与此页面相同的动画菜单:https://newland.tv/directors ，在 css 中使用 translateY 属性， 我使用 marquee 实现了非常相似的东西，但是动画的结尾和开头之间有很大的差距。 这是我的代码示例

<marquee bahavior="scroll" direction ="up">  

<ul class="m">

   <li>1. - http://afrika-agency.com/ ijzzejrzerjfp^</li>
   <li>1. - http://afrika-agency.com/ ijzzejrzerjfp^</li>
   <li>1. - http://afrika-agency.com/ ijzzejrzerjfp^</li>
   <li>1. - http://afrika-agency.com/ ijzzejrzerjfp^</li>
   <li>1. - http://afrika-agency.com/ ijzzejrzerjfp^</li>
   <li>1. - http://afrika-agency.com/ ijzzejrzerjfp^</li>
   <li>1. - http://afrika-agency.com/ ijzzejrzerjfp^</li>
   <li>1. - http://afrika-agency.com/ ijzzejrzerjfp^</li>

</ul>

</marquee>

这是CSS:

.marquee {
    height: 200px;
    width: 800px;
    border: 2px solid #eee;
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    margin: 200px auto;
}

 @keyframes marquee {
    0% { down: 0; }
    100% { down: -100%; }
}

Answer 1

您可以将 translateX 与无限动画一起使用；

.container{
  overflow:hidden;
  height:200px
}

.content{
  height:100%;
  animation: 3s linear up infinite
}

@keyframes up{
  from{transform:translateY(-100%)}
  to{transform:translateY(100%)}
}

<div class="container">
<div class="content">
<ul class="m">
   <li>1. - http://afrika-agency.com/ ijzzejrzerjfp^</li>
   <li>1. - http://afrika-agency.com/ ijzzejrzerjfp^</li>
   <li>1. - http://afrika-agency.com/ ijzzejrzerjfp^</li>
   <li>1. - http://afrika-agency.com/ ijzzejrzerjfp^</li>
   <li>1. - http://afrika-agency.com/ ijzzejrzerjfp^</li>
   <li>1. - http://afrika-agency.com/ ijzzejrzerjfp^</li>
   <li>1. - http://afrika-agency.com/ ijzzejrzerjfp^</li>
   <li>1. - http://afrika-agency.com/ ijzzejrzerjfp^</li>

</ul>

</div>
</div>