How to get a div to slide up from the bottom of the page using CSS

Question

I have a div with the following classes:

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    overflow: auto;
}

.slider {
    overflow-y: hidden;
    max-height: 100vh;
    transition-property: all;
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);

    &.close {
        max-height: 0;
    }
}

I want the div to slide up from the bottom of the page to fit the whole screen. Right now its sliding from the top of the page to fit the whole screen. How do I get that done using css/jquery?

When someone clicks a button, I remove the close class from the div (I want the div to slide up from the bottom of the page to the top of the page). If they ask to close the div (the div should slide from the top of the page to the bottom of the page and disappear - have height=0), I re-add the close button.

Here's the DIV:

<div class="overlay slider close"></div>

Answer 1

One possibility is to transition both the top (from 100% to 0) and either the height or max-height (from 0 to 100%). (vw and vh would be better than %, but IE, as usual, prefers not to.)

.slider {
  position: absolute;
  width: 100%;
  top: 0;
  height: 100%;
  overflow: hidden;
  transition: all 1s;
}

.slider.close {
  top: 100%;
  height: 0;
}

Demonstration here:

$('.trigger, .slider').click(function() {
  $('.slider').toggleClass('close');
});

.slider {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  overflow: hidden;
  background-color: #000; color: #FFF;
  transition: all 1s;
}

.slider.close {
  top: 100%;
  height: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="trigger">
  Bring it
</button>
<div class="slider close">Leave it</div>

(You could omit the 'height' animation by instead hiding the slider when it is "closed", but this would potentially change the page height during the animation causing the scrollbar to move around.)

Answer 2

This CSS, when added to an element, will allow it to slide upwards.

div.slide-up {
  height: 200px;
  overflow: hidden;
}

div.slide-up p {
  animation: 10s slide-up;
  margin-top: 0%;
}

@keyframes slide-up {
  from {
    margin-top: 100%;
    height: 300%;
  }
  to {
    margin-top: 0%;
    height: 100%;
  }
}

<div class="slide-up">
  <p>Slide up... </p>
</div>

Taken directly from http://www.html.am/html-codes/marquees/css-slide-in-text.cfm