html, body {

    background: #fff;

    height: 100%;

    width: 100%;

    display: flex;

    flex-direction: row;

}

​

.g-outer {

    width: 650px;

    height: 340px;

    margin: auto;

    background-image: url(https://images.cnblogs.com/cnblogs_com/coco1s/881614/o_21081614180122.png);

    overflow: hidden;

}

​

.g-inner {

    height: 340px;

    background: url(https://images.cnblogs.com/cnblogs_com/coco1s/881614/o_21081614175811.png);

}

​

.width-change {

    animation: widthchange 2s infinite alternate linear;

}

​

.mask-change {

    mask: linear-gradient(90deg, #fff 0%, #fff 50%, transparent 50%, transparent 100%);

    mask-size: 200% 100%;

    animation: maskChange 2s infinite alternate linear;

}

​

@keyframes widthchange {

    0% {

        width: 650px;

    }

    100% {

        width: 0px;

    }

}

​

@keyframes maskChange {

    0% {

        mask-position: -100% 0;

    }

    100% {

        mask-position: 0 0;

    }

}

​

​