（使用css和js）竖向文字轮播方法记录

要实现一个竖向文字轮播，每过特定秒数，就可以显现相对应的段文字。

题设：假设每次需要轮播的文字有两段，如下图：

每次显示时间为3秒，移动到下两段展示的页面所用时间为2s，（时间可根据所需修改）

方法：使用@keyframes（关键帧）

思路：设定想要显现的画面规格，展现出文字，多余部分隐藏，假设需要轮播8段文字，将其分为两部分，第一部分（fatherOne）使用css的@keyframes动画设置，通过改变transform的值来实现第一部分的向上移动；第二部分（fatherTwo）使用js的定时器来调用关键帧，因为第二部分的显现需要等待第一部分移动完成。第一部分当其所想要显现的部分已经向上移动完成时，可以让其改变translate的值，先向上移动确保所有内容已经离开显现盒子（displayBox），再向左，后向下，而后向右回到显现盒子的下面等待第二部分的移动完成，第二部分的运动规律同上。

html部分如下：

（简单设置其结构，方便观看，后续需要其他样式可继续添加）

        <ul class="father fatherOne">
            <li>第一段文字</li>
            <li>第二段文字</li>
            <li>第三段文字</li>
            <li>第四段文字</li>
        </ul>
        <ul class="father fatherTwo">
            <li>第五段文字</li>
            <li>第六段文字</li>
            <li>第七段文字</li>
            <li>第八段文字</li>
        </ul>
    </div>

css部分如下：

设置相对应的动画（时间，位置可根据需求更改）

            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .displayBox {
            width: 200px;
            height: 200px;
            margin: 100px auto;
            background-color: green;
            display: flex;
            flex-wrap: wrap;
            overflow: hidden;

        }

        .father {
            width: 200px;
            height: 200px;
            display: flex;
            flex-wrap: wrap;
        }

        .fatherOne {
            animation: slideOne 16s linear 0s infinite;
        }

        .father li {
            display: block;
            text-align: center;
            line-height: 100px;
            font-size: 16px;
            width: 200px;
            height: 100px;
            transition: all .3s linear;
        }

        @keyframes slideOne {
            0% {
                transform: translate(0, 0);
            }

            18.75% {
                transform: translate(0, 0);
            }

            25% {
                transform: translate(0, -200px);
            }

            43.75% {
                transform: translate(0, -200px);
            }

            50% {
                transform: translate(0, -400px);
            }

            56.25% {
                transform: translate(-200px, -400px);
            }

            62.5% {
                transform: translate(-200px, 200px);
            }

            68.75% {
                transform: translate(0, 200px);
            }

            93.75% {
                transform: translate(0, 200px);
            }

            100% {
                transform: translate(0, 0);
            }
        }

        @keyframes slideTwo {
            0% {
                transform: translate(0, 0);
            }

            6.25% {
                transform: translate(0, -200px);
            }

            25% {
                transform: translate(0, -200px);
            }

            31.25% {
                transform: translate(0, -400px);
            }

            50% {
                transform: translate(0, -400px);
            }

            56.25% {
                transform: translate(0, -600px);
            }

            62.5% {
                transform: translate(-200px, -600px);
            }

            78.75% {
                transform: translate(-200px, -400px);
            }

            75% {
                transform: translate(-200px, 200px);
            }

            80% {
                transform: translate(-200px, 0);
            }

            100% {
                transform: translate(0, 0);
            }
        }

js部分如下：

        slide = setInterval(() => {
            fatherTwo.style.animation = 'slideTwo 16s linear 0s infinite'
        }, 7000)

（但这个代码有点小bug，第二部分在移动过程中（关闭overflow可以看到）运动状态有问题，有没有大佬帮忙解释一下，感恩）