.cd-transition-layer {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 200;
            height: 100%;
            width: 100%;
            opacity: 0;
            visibility: hidden;
            overflow: hidden;
        }

        .cd-transition-layer .bg-layer {
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translateY(-50%) translateX(-2%);
            -moz-transform: translateY(-50%) translateX(-2%);
            -ms-transform: translateY(-50%) translateX(-2%);
            -o-transform: translateY(-50%) translateX(-2%);
            transform: translateY(-50%) translateX(-2%);
            /* its dimentions will be overwritten using jQuery to proportionally fit the viewport */
            height: 100%;
            /* our sprite is composed of 25 frames */
            width: 2500%;
            background: url(https://images.cnblogs.com/cnblogs_com/asdlijian/1829344/o_200816145707ink.png) no-repeat 0 0;
            background-size: 100% 100%;
        }

        .cd-transition-layer.visible {
            opacity: 1;
            visibility: visible;
        }

        .cd-transition-layer.opening .bg-layer {
            -webkit-animation: cd-sequence 0.8s steps(24);
            -moz-animation: cd-sequence 0.8s steps(24);
            animation: cd-sequence 0.8s steps(24);
            -webkit-animation-fill-mode: forwards;
            -moz-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        .cd-transition-layer.closing .bg-layer {
            -webkit-animation: cd-sequence-reverse 0.8s steps(24);
            -moz-animation: cd-sequence-reverse 0.8s steps(24);
            animation: cd-sequence-reverse 0.8s steps(24);
            -webkit-animation-fill-mode: forwards;
            -moz-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
        }

        .no-cssanimations .cd-transition-layer {
            display: none;
        }

        @-webkit-keyframes cd-sequence {
            0% {
                /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
                -webkit-transform: translateY(-50%) translateX(-2%);
            }

            100% {
                /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
                -webkit-transform: translateY(-50%) translateX(-98%);
            }
        }

        @-moz-keyframes cd-sequence {
            0% {
                /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
                -moz-transform: translateY(-50%) translateX(-2%);
            }

            100% {
                /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
                -moz-transform: translateY(-50%) translateX(-98%);
            }
        }

        @keyframes cd-sequence {
            0% {
                /* translateX(-2%) is used to horizontally center the first frame inside the viewport */
                -webkit-transform: translateY(-50%) translateX(-2%);
                -moz-transform: translateY(-50%) translateX(-2%);
                -ms-transform: translateY(-50%) translateX(-2%);
                -o-transform: translateY(-50%) translateX(-2%);
                transform: translateY(-50%) translateX(-2%);
            }

            100% {
                /* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport  */
                -webkit-transform: translateY(-50%) translateX(-98%);
                -moz-transform: translateY(-50%) translateX(-98%);
                -ms-transform: translateY(-50%) translateX(-98%);
                -o-transform: translateY(-50%) translateX(-98%);
                transform: translateY(-50%) translateX(-98%);
            }
        }

        @-webkit-keyframes cd-sequence-reverse {
            0% {
                -webkit-transform: translateY(-50%) translateX(-98%);
            }

            100% {
                -webkit-transform: translateY(-50%) translateX(-2%);
            }
        }

        @-moz-keyframes cd-sequence-reverse {
            0% {
                -moz-transform: translateY(-50%) translateX(-98%);
            }

            100% {
                -moz-transform: translateY(-50%) translateX(-2%);
            }
        }

        @keyframes cd-sequence-reverse {
            0% {
                -webkit-transform: translateY(-50%) translateX(-98%);
                -moz-transform: translateY(-50%) translateX(-98%);
                -ms-transform: translateY(-50%) translateX(-98%);
                -o-transform: translateY(-50%) translateX(-98%);
                transform: translateY(-50%) translateX(-98%);
            }

            100% {
                -webkit-transform: translateY(-50%) translateX(-2%);
                -moz-transform: translateY(-50%) translateX(-2%);
                -ms-transform: translateY(-50%) translateX(-2%);
                -o-transform: translateY(-50%) translateX(-2%);
                transform: translateY(-50%) translateX(-2%);
            }
        }