.img_wr {
    position: relative;
    overflow: hidden;
}
.animate_me.active .dim {
    animation: leftDim 1.2s cubic-bezier(.215, .61, .355, 1) forwards .3s;
}
.animate_me .img_wr .dim {
    width: 100%;
    height: 100%;
    background: #122C4F;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    transition: opacity 0.5s;
}
.animate_me .dim {
    translate: none;
    rotate: none;
    scale: none;
    transform-origin: 100% 50%;
    transform: scale(0, 1);
}

@keyframes leftDim {
    0% {
        transform: scale(0, 1);
    }
    40% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1, 1);
    }
    100% {
        transform: scale(1, 1) translateX(-100%);
    }   
}   

/*  */
.right_img.animate_me .dim {
    transform-origin: 0% 50%;
}
.right_img.animate_me.active .dim {
    animation: rightDim 1.2s cubic-bezier(.215, .61, .355, 1) forwards .3s;
}
@keyframes rightDim {
    0% {
        transform: scale(0, 1);
    }
    40% {
        transform: scale(1, 1);
    }
    50% {
        transform: scale(1, 1);
    }
    100% {
        transform: scale(1, 1) translateX(100%);
    }
}