SOURCE

window.onload = function () {

    let arrow = document.getElementsByClassName("arrow")[0];
    let footer = document.getElementById("footer");
    let info = document.getElementById("info");
    let extra = document.getElementById("extra");

    arrow.addEventListener("click", function () {
        footer.classList.add("animate-footer");
        info.classList.add("animate-shadow");
        setTimeout(function () {
            extra.style.display = "block";
        }, 2100);

    });

};

<div class="container">
	<div class="row">
		<div class=col-12>
			<div class="card">
				<div class="card-body px-0 py-0">
					<div class="info text-center" id=info>
						<h4 class="pt-5">Clear night</h4>
						<h6 class="">Izmir, Turkey</h6>
						<h1 class="">33°C</h1>
					</div>
				</div>
				<div class="card-footer" id="footer">
					<div class="container">
						<div class="row">
							<div class="col-12 text-center" style="margin-top: -35px;" id=arrow>
								<i class="fas fa-chevron-up fa-2x arrow" style="color: #000000c2;"></i>
              </div>
              <div class="col-12" id="future">
                <p>Tomorrow</p>
                <p class="text-right">23°C</p>
                <span id="extra">
                  <div class="col-12">
                    <p>Tuesday</p>
                    <p class="text-right">22°C</p>
                  </div>
                  <div class="col-12">
                    <p>Wednesday</p>
                    <p class="text-right">19°C</p>
                  </div>
                  <div class="col-12">
                    <p>Thursday</p>
                    <p class="text-right">21°C</p>
                  </div>
                  <div class="col-12">
                    <p>Friday</p>
                    <p class="text-right">23°C</p>
                  </div>
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

 import url("https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800,900");

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Montserrat", sans-serif;
}
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  height: 480px;
  width: 320px;
  top:15vh;
  margin-bottom:150px;
}
.card-body {
  background-image: url("https://cdn.pixabay.com/photo/2016/07/29/10/07/nature-1552091_960_720.png");
  background-position: top;
  background-repeat: no-repeat;
  background-size: 200% 100%;
}
.info {
  background-color: #0000004f;
  color: white;
  height: 410px;
}
.info h4 {
  font-size: 2.5rem;
  font-weight: 400;
}
.info h6 {
  font-size: 1.2rem;
  font-weight: 400;
}
.info h1 {
  font-size: 3.5rem;
  font-weight: 600;
}
.card-footer {
  padding: 1.25rem 1.25rem;
  padding-bottom: 0.5rem;

}
.card-footer p:first-child {
  float: left;
}
.arrow:hover{
  margin-top:-10px;
  transform: scale(1.5); 
  cursor: pointer;
}
#extra {
  display: none;
  width: 250px;
  opacity: 0.7;
}

.animate-footer {
    -webkit-animation: nextDay 2s;
  animation: nextDay 2s;
  animation-fill-mode: forwards;
}
.animate-shadow {
  -webkit-animation: shadow 2s;
  animation: shadow 2s;
  animation-fill-mode: forwards;
}
@keyframes nextDay {
    0% {height:70px;}
  100% {height:265px;}
  }
@-webkit-keyframes nextDay {
    0% {height:70px;}
  100% {height:265px;}
  }
@keyframes shadow {
    0% {height:410px;}
  100% {height:215px;}
  }
@-webkit-keyframes shadow {
    0% {height:410px;}
  100% {height:215px;}
  }