如何控制CSS动画的速度而不仅仅是持续时间?

时间:2018-12-21 14:29:20

标签: css animation

我有一个使用CSS动画关键帧的滚动列表项列表。它可以实现我想要的功能,但是我只控制持续时间,而不控制速度,因此,如果我添加项目,它会变得太快,而如果我删除项目,它会变得太慢。

是否可以仅使用CSS设置速度?

这是我的CSS,是指向CodePen的链接:https://codepen.io/disco_p/pen/BvWdqX?editors=1100

section {
    height: 90vh;
    background: #000;
}

  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    color: #fff;
    font-size: em(18);
    text-align: center;
    font-weight: 500;
    column-count: 4;
    column-width: 200px;
    column-gap: 50px;
    animation: floatTextUp 3s infinite linear;
  }

  li {
    margin-bottom: 1.1em;
  }

  .scroll {
    height: 200px;
    overflow: hidden;
    position: relative;
  }

  @keyframes floatTextUp {
    to {
      transform: translateY(100%);
    }
  }

0 个答案:

没有答案