CSS переход не работает снизу вверх

Question

я использовал ниже css для моей боковой панели и transition работает, так как эта боковая панель открывается слева направо

CSS

.sidebar{
    position: absolute;
    width: 300px;
    top: 0;
    bottom: 0;
    left: 0;
    background-color: #FFF;
    height: 100%;
    z-index: 101;
    left: -310px;
    -webkit-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    -moz-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    -o-transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); 
    transition: all 500ms cubic-bezier(0.215, 0.610, 0.355, 1.000); /* easeOutCubic */
}

и здесь я пытаюсь transition снизу вверх с тем же кодом css, но для приведенного ниже кода эффект перехода отсутствует.

.sidebarr{
    position: fixed;
    font-size: 15px;
    width: 100%;
    background-color: #FFF;
    height: 70%;
    z-index: 101;
    bottom: -100%;
    transition: all 0.3s cubic-bezier(0.000, 0.000, 0.230, 1);
}

.sidebarr.opened{
top: 30%
}

Теперь, как мне анимировать, когда div скользит снизу вверх.

Answer 1

заменить

.sidebarr.opened{
top: 30%
}

на

.sidebarr.opened{
    bottom: 0
    }