黑白球交替动画

又一个不太理解的动画效果，就当练习了

<template>
    <div class="mainrouter"
        style="background-color: rgb(117, 115, 241);display: flex;justify-content: center;align-items: center;">
        <div class="yvan">
            <div class="yvan-nei" v-for="(item,index) in 36" :key="index"></div>
        </div>
    </div>
</template>
<style lang="scss">
$x: 300px;
$y: 300px;
$x2: 20px;
$y2: 20px;
// 小球的数量
$num: 36;
// 小球旋转角度
$PDeg: 360deg/$num;
// 运动时间
$duration: 2s;

.yvan {
    width: $x;
    height: $y;
    border-radius: 50%;
    // border: 1px solid white;
    position: relative;


    .yvan-nei {
        width: $x2;
        height: $y2;
        // background: red;
        position: absolute;
        left: $x/2-$x2/2px;

        // 设置旋转半径
        transform-origin: center $x/2 + $x2/2;
        top: (-$y2/2);
        // 设置
        // 设置井深
        perspective: 80px;
        // 
        transform-style: preserve-3d;

        @for $i from 1 through $num {
            &:nth-child(#{$i}) {
                transform: rotate(($i+1)*$PDeg);

                // 设置动画延迟时间
                &::before,
                &::after {
                    animation-delay: -$duration / $num *($i - 1) *6;
                }

            }
        }

        &::before,
        &::after {
            content: '';
            display: block;
            width: inherit;
            height: inherit;
            border-radius: 50%;
            position: absolute;
        }

        &::before {
            background: black;
            top: -100%;
            animation: router-black $duration infinite; //linear匀速 infinite无限重复

            // 黑球运动动画，只看一个黑球的移动轨迹，发现是在3d上进行
            // 先沿着x轴正方向移动100%，然后沿着y轴正方向移动200%，最后回到原点
            @keyframes router-black {
                0% {
                    // 运动时间曲线
                    animation-timing-function: ease-in;
                }

                25% {
                    transform: translate3d(0, 100%, $x2);
                    animation-timing-function: ease-out;
                }

                50% {
                    transform: translate3d(0, 200%, 0);
                    animation-timing-function: ease-in;
                }

                75% {
                    transform: translate3d(0, 100%, -$x2);
                    animation-timing-function: ease-out;
                }
            }
        }

        &::after {
            background: white;
            top: 100%;
            animation: router-white $duration linear infinite;

            // 白球运动动画，只看一个黑球的移动轨迹，发现是在3d上进行
            @keyframes router-white {
                0% {
                    animation-timing-function: ease-in;
                }

                25% {
                    transform: translate3d(0, -100%, -$x2);
                    animation-timing-function: ease-out;
                }

                50% {
                    transform: translate3d(0, -200%, 0);
                    animation-timing-function: ease-in;
                }

                75% {
                    transform: translate3d(0, -100%, $x2);
                    animation-timing-function: ease-out;
                }
            }

        }
    }

}
</style>