SOURCE

<div class="wrap" style="--list-len: 20; --h: 30px">
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li>10</li>
		<li>11</li>
		<li>12</li>
		<li>13</li>
		<li>14</li>
		<li>15</li>
		<li>16</li>
		<li>17</li>
		<li>18</li>
		<li>19</li>
		<li>20</li>
        <li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li>10</li>
	</ul>
</div>

.wrap{
    width: 80vw;
    height: 300px;
    position: relative;
    border: 1px solid #333;
    overflow: hidden;
}

ul{
    margin: 0;
    padding: 0;
    width: 100%;
    position: absolute;
    top: 0;

    /* 无过渡动画 */
    /* animation: scroll 20s steps(20) infinite; */ 

    /* 有过渡动画 */
    animation: scroll-ease 10s 1s infinite;
}

ul:hover {
    animation-play-state: paused;
}

ul li {
    height: var(--h);
    line-height: var(--h);
    text-align: center;
    box-shadow: 0 1px 2px #ccc;
}

@keyframes scroll {
    from {
        top: 0;
    }

    to {
        top: calc(var(--list-len) * var(--h) * -1);
    }
}

@keyframes scroll-ease {
    0% {  
        top: 0;
    }

    3%, 5% { 
        top: calc(-1 * var(--h));
    }

    8%, 10% {
        top: calc(-2 * var(--h));
    }

    13%, 15% {
        top: calc(-3 * var(--h));
    }

    18%, 20% { 
        top: calc(-4 * var(--h));
    }

    23%, 25% {
        top: calc(-5 * var(--h));
    }

    28%, 30% {
        top: calc(-6 * var(--h));
    }

    33%, 35% {
        top: calc(-7 * var(--h));
    }

    38%, 40% {
        top: calc(-8 * var(--h));
    }

    43%, 45% {
        top: calc(-9 * var(--h));
    }

    48%, 50% {
        top: calc(-10 * var(--h));
    }

    53%, 55% {
        top: calc(-11 * var(--h));
    }

    58%, 60% {
        top: calc(-12 * var(--h));
    }

    63%, 65% {
        top: calc(-13 * var(--h));
    }

    68%, 70% {
        top: calc(-14 * var(--h));
    }

    73%, 75% {
        top: calc(-15 * var(--h));
    }

    78%, 80% {
        top: calc(-16 * var(--h));
    }

    83%, 85% {
        top: calc(-17 * var(--h));
    }

    88%, 90% {
        top: calc(-18 * var(--h));
    }

    93%, 95% {
        top: calc(-19 * var(--h));
    }

    98% {
        top: calc(-20 * var(--h));
    }

    98.001% {
        top: 0;
    }
}