css3使用animation动画实现无限滚动轮播图

简单效果图

简单功能描述：
使用css3的animation使用轮播图无限滚动动画效果

css

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
           list-style: none;
            width: 100%;
        }
        li {
            list-style-type: none;
        }

        .box {
            width: 1000px;
            height: 100%;
            overflow: hidden;
            margin: 0 auto;
        }

        .box1-ul,.box2-ul {
           display: flex;
           flex-wrap: nowrap;
        }

        .box1-ul {
            width: 6000px;
            animation: myAnimation 16s infinite 3s;
        }

        .box1-ul:hover {
            /* 鼠标移入暂停 */
            animation-play-state: paused;
        }

        .box2-ul { 
            width: 3000px;
            /* myAnimation2动画针 10s执行完一轮 infinite无限循环 3代表执行三次动画 延迟3s执行  alternate执行完回退执行*/
            animation: myAnimation2 10s 3 2s alternate;
        }

        .box2-ul:hover {
            /* 鼠标移入暂停 paused 默认是运动 running值 */
            animation-play-state: paused;
           
        }

        .box1-ul li,.box2-ul li {
            flex-shrink: 0;
            width: 1000px;
            height: 400px;
            font-size: 50px;
            text-align: center;
            line-height: 400px;
            font-weight: 800;
            color: red;
        }

        .box1-ul li:nth-child(odd),.box2-ul li:nth-child(odd) {
            background-image: linear-gradient(blue 20%, yellow 30%);
        }

        .box1-ul li:nth-child(even),.box2-ul li:nth-child(even)  {
            background-image: linear-gradient(rgb(255, 85, 0) 20%, yellow 30%);
        }

        @keyframes myAnimation {
            20% {
                transform: translateX(-1000px);
            }

            40% {
                transform: translateX(-2000px);
            }

            60% {
                transform: translateX(-3000px);
            }

            80% {
                transform: translateX(-4000px);
            }

            100% {
                transform: translateX(-5000px);
            }

        }

        @keyframes myAnimation2 {
            50% {
                margin-left: -1000px;
            }

            100% {
                margin-left: -2000px;
            }
        }

    </style>

html

<div class="box">
        <ul class="box1-ul">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>


        <ul class="box2-ul">
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
    </div>