.arrive-fade_in,
.arrive-fade_out {
    opacity: 0;
    -webkit-opacity: 0;
}

.arrive-fade_in.arrive-active,
.arrive-fade_out.arrive-active {
    opacity: 1;
    -webkit-opacity: 1;
}

.arrive-mask_in--up,
.arrive-mask_out--up,
.arrive-mask_in--right,
.arrive-mask_out--right,
.arrive-mask_in--down,
.arrive-mask_out--down,
.arrive-mask_in--left,
.arrive-mask_out--left {
    display: inline-block;
    overflow: hidden;
    position: relative;
}

.arrive-mask_in--up .mask,
.arrive-mask_out--up .mask,
.arrive-mask_in--right .mask,
.arrive-mask_out--right .mask,
.arrive-mask_in--down .mask,
.arrive-mask_out--down .mask,
.arrive-mask_in--left .mask,
.arrive-mask_out--left .mask {
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    height: 101%;
    width: 101%;
    z-index: 2;
    transform: translate(0, 0);
    -webkit-transform: translate(0, 0);
}

.arrive-mask_in--up.arrive-active .mask,
.arrive-mask_out--up.arrive-active .mask {
    transform: translate(0, -101%);
    -webkit-transform: translate(0, -101%);
}

.arrive-mask_in--right.arrive-active .mask,
.arrive-mask_out--right.arrive-active .mask {
    transform: translate(101%, 0);
    -webkit-transform: translate(101%, 0);
}

.arrive-mask_in--down.arrive-active .mask,
.arrive-mask_out--down.arrive-active .mask {
    transform: translate(0, 101%);
    -webkit-transform: translate(0, 101%);
}

.arrive-mask_in--left.arrive-active .mask,
.arrive-mask_out--left.arrive-active .mask {
    transform: translate(-101%, 0);
    -webkit-transform: translate(-101%, 0);
}

.arrive-move_in--up.arrive-active,
.arrive-move_out--up.arrive-active,
.arrive-move_in--down.arrive-active,
.arrive-move_out--down.arrive-active,
.arrive-move_in--left.arrive-active,
.arrive-move_out--left.arrive-active,
.arrive-move_in--right.arrive-active,
.arrive-move_out--right.arrive-active {
    transform: translate(0, 0) !important;
    -webkit-transform: translate(0, 0) !important;
}