小编Bil*_*far的帖子

我是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;
    } …