如何用css animation实现每隔一秒滚动一行的效果?

如何用css animation实现每隔一秒滚动一行的效果?

<html>
  <head>

    <style>


      .mf {
        animation-name: example;
        animation-duration: 4s;
        animation-timing-function: steps(5)
      }
      
      @keyframes example {
        from {transform: translate(0,0)}
        to {transform: translate(0,-100px)}
      }

      
    </style>

  </head>
  <body>
    <div class="mf">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </body>
</html>

我这么写的话每次的动画都是直接挪动,我希望实现每隔一段时间平滑地滚动一下,然后停一下,再滚动一下。
应该怎么改写?

阅读 4.8k
2 个回答
@keyframes example {
    from {transform: translate(0,0)}
    30% {transform: translate(0,-100px)}
}
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题