.in-top .caption-pane {
    animation: in-top 300ms ease 0ms 1 forwards;
}

.in-right .caption-pane {
    animation: in-right 300ms ease 0ms 1 forwards;
}

.in-bottom .caption-pane {
    animation: in-bottom 300ms ease 0ms 1 forwards;
}

.in-left .caption-pane {
    animation: in-left 300ms ease 0ms 1 forwards;
}

.out-top .caption-pane {
    animation: out-top 300ms ease 0ms 1 forwards;
}

.out-right .caption-pane {
    animation: out-right 300ms ease 0ms 1 forwards;
}

.out-bottom .caption-pane {
    animation: out-bottom 300ms ease 0ms 1 forwards;
}

.out-left .caption-pane {
    animation: out-left 300ms ease 0ms 1 forwards;
}


@keyframes in-bottom {
    from { transform: translate3d(0, 50%, 0); }
    to { transform: translate3d(0, 0, 0); }
}

@keyframes in-left {
    from { transform: translate3d(-50%, 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}

@keyframes in-right {
    from { transform: translate3d(50%, 0, 0); }
    to { transform: translate3d(0, 0, 0); }
}

@keyframes in-top {
    from { transform: translate3d(0, -50%, 0); }
    to { transform: translate3d(0, 0, 0); }
}

@keyframes out-bottom {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(0, 50%, 0); }
}

@keyframes out-left {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-50%, 0, 0); }
}

@keyframes out-right {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(50%, 0, 0); }
}

@keyframes out-top {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(0, -50%, 0); }
}