新闻自动收报机的css3自定义动画

Question

我是CSS3的新手,所以如果你觉得这个问题很愚蠢,请忽略.

我正在制作动画,其中我有4个列表项,我需要向上移动这些列表项无限次,当一个旋转完成时,它向下返回然后开始动画但我需要从那一点继续.

第二件事是我需要停止列表项目4秒,基本上它是一个新闻自动收报机,所以我需要像这一个,我已经尝试和开发的东西,但不是我想要的.

这是我的代码:

HTML

<div class="news">

<ul>

    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
    </ul>

</div>

CSS3

@keyframes ticker {
        0% {
            margin-top: 0
        }
        25% {
            margin-top: -30px
        }
        50% {
            margin-top: -60px
        }
        75% {
            margin-top: -90px
        }
        100% {
            margin-top: 0
        }
    }

    .news {
        width: 350px;
        height: 32px;
        overflow: hidden;
        -webkit-user-select: none;
    }

    .news ul {
        width: 350px;
        padding-left: 10px;
        animation: ticker 10s infinite;
        -webkit-user-select: none;
    }

    .news ul li {
        line-height: 29px;
        list-style: none;
        font-size: 10pt;
    }

    .news ul:hover {
        animation-play-state: paused
    }

    .news span:hover+ul {
        animation-play-state: paused
    }

我已将它添加到CodePen中,以便您可以有更好的想法.任何建议都会非常有用!!

Answer 1

我改变了你处理动画的方式。

现在，我分别为每个元素设置动画，但重复使用相同的动画并设置不同的延迟

@keyframes ticker {
  0% {
    transform: translateY(100%);
  }
  5%,
  25% {
    transform: translateY(0%);
  }
  30%,
  100% {
    transform: translateY(-100%);
  }
}
.news {
  width: 350px;
  height: 32px;
  overflow: hidden;
  border: solid 1px green;
  position: relative;
}
.news ul {
  width: 350px;
  padding-left: 10px;
}
.news li {
  position: absolute;
  top: 0px;
  line-height: 29px;
  list-style: none;
  font-size: 10pt;
  animation: ticker 8s infinite linear;
}
.news ul:hover {
  animation-play-state: paused
}

.news li:nth-child(4) {
  animation-delay: -2s;
}
.news li:nth-child(3) {
  animation-delay: -4s;
}
.news li:nth-child(2) {
  animation-delay: -6s;
}

<div class="news">
  <ul>
    <li>1111</li>
    <li>2222</li>
    <li>3333</li>
    <li>4444</li>
  </ul>
</div>