.transition,
.animsition-overlay {
    position: relative;
    opacity: 0;
    animation-fill-mode: both;
}

/**
 * overlay option
 */

.animsition-overlay-slide {
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: #404040;
}

@keyframes overlay-slide-in-left {
    0% {
        width: 100%;
    }
    100% {
        width: 0;
    }
}


.overlay-slide-in-left {
    width: 0;
    animation-name: overlay-slide-in-left;
}


@keyframes overlay-slide-out-left {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}


.overlay-slide-out-left {
    left: 0;
    width: 100%;
    animation-name: overlay-slide-out-left;
}

@keyframes overlay-slide-in-right {
    0% {
        width: 100%;
    }
    100% {
        width: 0;
    }
}


.overlay-slide-in-right {
    right: 0;
    width: 0;
    animation-name: overlay-slide-in-right;
    animation-delay: 1.2s;
}


@keyframes overlay-slide-out-right {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}


.overlay-slide-out-right {
    right: 0;
    width: 100%;
    animation-name: overlay-slide-out-right;
}