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: au         


        

Answer 1

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

<style style="text/css">
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%;
  }
}
</style>

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

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

Answer 2

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.)