.upbar {
    animation: move-down 0.6s forwards;
    transform-origin: 25px 25px;
}

.midbar {
    opacity: 0;
    transition: opacity 0.25s
}

.downbar {
    animation: move-up 0.6s forwards;
    transform-origin: 25px 25px;
}

/*ANIMATIONS*/
/*Not Browser compatible*/

@keyframes move-down {
    from {
        transform: rotate(45deg);
    }
    to {
        transform: rotate(-45deg);
    }
}

@keyframes move-up {
    from {
        transform: rotate(-45deg);
    }
    to {
        transform: rotate(45deg);
    }
}

/*END: ANIMATIONS*/


/*REVERSE-ANIMATIONS*/
.rev-downbar {
    animation: reverse-move-down 0.6s forwards;
}

.rev-upbar {
    animation: reverse-move-up 0.6s forwards;
}

@keyframes reverse-move-down {
    from {
        transform:  rotate(45deg);
        transition: transform 0.5s;
        transform-origin: center;
    }
    to {
        translate: 0 -28%;
        transform: translate(0);
    }
}

@keyframes reverse-move-up {
    from {
        transform: rotate(-45deg);
        transition: transform 0.5s;
        transform-origin: 50% 50%;
    }
    to {
        translate: 0 28%;
        transform: translate(0);
    }
}
/*END: REVERSE-ANIMATIONS*/