Transicao backgroundimage

by Felype Rennan

HTML

<div class="menu">
    <h1>Menu
        <button class="bt_menu"></button>
    </h1>
    <div class="parte expansivel">
        <p>Huadauehauehuahe</p>
        <p>Alguma coisa</p>
        <p>so pra encher aqui</p>
        <p>porque </p>
        <p>porque eu quis</p>
        <p>Huadauehauehuahe</p>
    </div>
</div>

CSS

body {
    font-family: "Lucida Sans", sans-serif;
}

.menu > h1 {
    font-size: 26px;
    font-weight: normal;
    text-decoration: underline;
    cursor: pointer;
}

.parte.expansivel {    
    transition: 0.4s ease-in-out;
    transform-origin: top;
}

.menu:not(.abrir) .parte.expansivel {
    transform: rotateX(90deg);
    max-height: 0;
}
.menu.abrir .parte.expansivel {
    transform: rotateX(0);
    max-height: none;
}

.bt_menu, .bt_fechar {
    margin: 8px;
    border: none;
    width: 20px;
    height: 20px;
    background-color:transparent;
    position: relative;
    outline: none;
    cursor: pointer;
}

/* decl padrĂŁo com os bgs */
.bt_menu:before {
    transition: 0.4s ease-in-out;
    background-size: cover;
    background-color:transparent;
    background-position:center;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    width: 100%; height: 100%;
    content: " ";
    transform: scale(1) rotateZ(-90deg);
    background-image: url('http://www.myiconfinder.com/uploads/iconsets/256-256-ed559f9ab4ee6cec08ffde71c58a68af-grid.png');
}
.bt_menu:after {
    transition: 0.4s ease-in-out;
    background-size: cover;
    background-color:transparent;
    background-position:center;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    width: 100%; height: 100%;
    content: " ";
    transform: scale(1) rotateZ(0);
    background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-close-128.png');
}

/* animacoes */
.menu:not(.abrir) .bt_menu:before {
    transform: scale(1) rotateZ(-90deg);
}
.menu.abrir .bt_menu:before {
    transform: scale(0.1) rotateZ(0deg);
    opacity: 0;
}
.menu:not(.abrir) .bt_menu:after {
    transform: scale(1.3) rotateZ(-90deg);
    opacity: 0;
}
.menu.abrir .bt_menu:after {
    transform: scale(1) rotateZ(0);
}

JavaScript

$(".menu > h1").click(function(e) {
    $(this).parent().toggleClass("abrir");    
});