How to add Transition with Input Checkbox while Showing and Hiding

Question

I want a transition or animation with the content box stickyads while I toggle the arrow button to hide/show.
But when height: auto; it does not work, while if height: 90px; it works. I want my height to be auto with transition working.

input#toggle {
    display: none;
}
.stickyadsContent {
  text-align: -webkit-center;
  transition: all 2s linear;
  height: auto;
}

input:checked~.stickyadsContent {
  height: 0px;
}
input:checked~.stickyadsClose:before {
  content: "\276E";
  margin-left: -5px;
  -webkit-text-stroke-width: 1px;
  transform: rotate(90deg);
}
.stickyadsClose:before {
  content: "\276E";
  -webkit-text-stroke-width: 1px;
  transform: rotate(270deg);
}

.stickyadsClose { 
    width: 30px;
    height: 25px;
    display: flex;
    justify-content: center;
    border-radius: 0px 10px 0px 0px;
    position: absolute;
    left: 0px;
    cursor: pointer;
    top: -25px;
    background-color: #ffffff;
    box-shadow: -10px -8px 20px -3px rgb(9 32 76 / 6%);
}
 .stickyads { 
   position: fixed;
   bottom: 0px;
   left: 0;
   width: 100%;
   box-shadow: 0 -6px 18px 0 rgba(9,32,76,.1);
   background-color: #fefefe;
   z-index: 999;
}

<div class='stickyads'>
<input id="toggle" type="checkbox">
<label for="toggle" class="stickyadsClose"></label>
<div class="stickyadsContent">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

Answer 1

This is a slight compromise, but gives the end effect.

As it is not possible to animate height in CSS this snippet instead uses translateY to move the text out of view as this is animatable.

We are then left with the problem of the arrow and how to move that an (unknown) distance down. The snippet uses CSS calc to move it along with the text but to top 100% - 25px.

input#toggle {
  display: none;
}

.stickyadsContent {
  text-align: -webkit-center;
  transition: all 2s linear;
  transform: translateY(0);
  height: auto;
}

input:checked~.stickyadsContent {
  rheight: 0px;
  transform: translateY(100%);
}

input:checked~.stickyadsClose {
  top: calc(100% - 25px);
}

input:checked~.stickyadsClose:before {
  content: "\276E";
  margin-left: -5px;
  -webkit-text-stroke-width: 1px;
  transform: rotate(90deg);
}

.stickyadsClose:before {
  content: "\276E";
  -webkit-text-stroke-width: 1px;
  transform: rotate(270deg);
}

.stickyadsClose {
  width: 30px;
  height: 25px;
  display: flex;
  justify-content: center;
  border-radius: 0px 10px 0px 0px;
  position: absolute;
  left: 0px;
  cursor: pointer;
  top: -25px;
  background-color: #ffffff;
  box-shadow: -10px -8px 20px -3px rgb(9 32 76 / 6%);
  transition: top 2s linear;
}

.stickyads {
  position: fixed;
  bottom: 0px;
  left: 0;
  width: 100%;
  box-shadow: 0 -6px 18px 0 rgba(9, 32, 76, .1);
  background-color: #fefefe;
  z-index: 999;
}

<div class='stickyads'>
  <input id="toggle" type="checkbox">
  <label for="toggle" class="stickyadsClose"></label>
  <div class="stickyadsContent">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    <br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

UPDATE: one of the requirements is that the whole element goes to height 0 when it shrinks. This snippet achieves this by using CSS animations rather than transition on the content. It also moves the shadow to the content element so that it moves down and up with it. At the end of the shrink animation it sets the height to 0.

input#toggle {
  display: none;
}

input~.stickyadsContent {
  text-align: -webkit-center;
  height: auto;
  translateY(0);
  animation: grow 2s linear 1 forwards;
}

@keyframes grow {
  0% {
    transform: translateY(100%);
    height: auto;
    opacity: 0;
  }
  1% {
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    height: auto;
    opacity: 1;
  }
}

input:checked~.stickyadsContent {
  animation: shrink 2s linear 1 forwards;
  transition: all 10s;
}

@keyframes shrink {
  0% {
    transform: translateY(0);
    height: auto;
    opacity: 1;
  }
  99% {
    transform: translateY(110%);
    height: auto;
    opacity: 1;
  }
  100% {
    height: 0;
    opacity: 0;
  }
}

input:checked~.stickyadsClose:before {
  content: "\276E";
  margin-left: -5px;
  -webkit-text-stroke-width: 1px;
  transform: rotate(90deg);
}

.stickyadsClose:before {
  content: "\276E";
  -webkit-text-stroke-width: 1px;
  transform: rotate(270deg);
}

input:checked~.stickyadsClose {
  top: calc(100% - 25px);
}

.stickyadsClose {
  width: 30px;
  height: 25px;
  display: flex;
  justify-content: center;
  border-radius: 0px 10px 0px 0px;
  position: absolute;
  left: 0px;
  cursor: pointer;
  top: -25px;
  background-color: #ffffff;
  box-shadow: -10px -8px 20px -3px rgb(9 32 76 / 6%);
  transition: top 2s linear;
}

.stickyads {
  position: fixed;
  bottom: 0px;
  left: 0;
  width: 100%;
  background-color: #fefefe;
  z-index: 999;
  /* uncomment this if you want the bottom text to show initially without animation */
  /* animation: show 2.1s 1 linear forwards; */
}

@keyframes show {
  0% {
    opacity: 0;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div class='stickyads'>
  <input id="toggle" type="checkbox">
  <label for="toggle" class="stickyadsClose"></label>
  <div class="stickyadsContent" style="box-shadow: 0 -6px 18px 0 rgba(9, 32, 76, .1);">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    <br> Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>