.transferLeftToCenter {
    animation-name: LeftTo;
    animation-duration: 1s;
}

@keyframes LeftTo {
    from {
        left: 0%;
    }
}

.playShowToCenter {
    animation-name: showToCenter;
    animation-duration: 0.5s;
}

@keyframes showToCenter {
    from {
        height: 0;
        top: 50%;
    }
}

.playShowToLeft {
    animation-name: showToLeft;
    animation-duration: 0.5s;
}

@keyframes showToLeft {
    from {
        left: -100%;
    }
}

.playShowToTop {
    animation-name: showToTop;
    animation-duration: 0.5s;
}

@keyframes showToTop {
    from {
        height: 0;
    }
}

.playShowToRight {
    animation-name: showToRight;
    animation-duration: 0.5s;
}

@keyframes showToRight {
    from {
        left: 200%;
    }
}

.playShowToBottom {
    animation-name: showToBottom;
    animation-duration: 0.5s;
}

@keyframes showToBottom {
    from {
        top: 100%;
        height: 0;
    }
}