清华大佬耗费三个月吐血整理的几百G的资源，免费分享！....>>>

$count: 50;
@for $idx from 1 through $count {
    @keyframes #{'anime-' + $idx} {
        0% {
            transform: skewY(0deg) scaleX(1);
            z-index: $idx;
        }

        50% {
            z-index: 1000 - $idx;
        }

        100% {
            transform: skewY(180deg) scaleX(-1);
            z-index: 1000 - $idx;
        }
    }
}

body {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    & > div {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 400px;
        height: 300px;
        margin: auto;

        & > div {
            width: 50%;
            box-sizing: border-box;
            border: 1px solid;
            position: absolute;
            top: 0;
            bottom: 0;

            &.left {
                border-right: none;
                left: 0;
                transform-origin: right;
            }

            &.right {
                border-left: none;
                right: 0;
                transform-origin: left;
                display: none;
            }
        }

        @for $idx from 1 through $count {
            &:nth-child(#{$idx}) > div {
                background-color: rgb(random(256)-1, random(256)-1, random(256)-1);
                animation: #{'anime-' + $idx} 1s (.05s * ($count - $idx) + 1s) linear forwards;
            }
        }
    }
}