.offcanvas-start.showing,
.offcanvas-end.showing,
.offcanvas-top.showing,
.offcanvas-bottom.showing {
    transition: transform 0.3s ease-in-out;
}

.offcanvas-start {
    transform: translateX(-100%);
}

.offcanvas-start.show {
    transform: translateX(0);
}

.offcanvas-end {
    transform: translateX(100%);
}

.offcanvas-end.show {
    transform: translateX(0);
}

.offcanvas-top {
    transform: translateY(-100%);
}

.offcanvas-top.show {
    transform: translateY(0);
}

.offcanvas-bottom {
    transform: translateY(100%);
}

.offcanvas-bottom.show {
    transform: translateY(0);
}