.mskBox {
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
}

.mskBox .mskBoxInner {
    font-size: 1.5em;
    text-align: center;
    color: #555;
    /* background-color: #fff; */
    display: flex;
    opacity: 0;
    border-radius: 12px;
}
.mskBox .mskBoxInner img {
    border-radius: 12px;
}
.isPlay {
    animation-name: play;
    animation-duration: .5s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.8, 0, .5, 1);
    position: relative;
    opacity: 1 !important;
}

.isPlay:before {
    animation-name: maskOut;
    animation-duration: .5s;
    animation-delay: .5s;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.8, 0, .5, 1);
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(109.6deg, rgba(245, 245, 245, 0.661) 11.2%, rgb(43 61 199) 91.1%);
    border-radius: 12px;
}

@keyframes play {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes maskOut {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(100%);
    }
}