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>

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

1 个答案: