transition-duration: 1s

by Kevin Bratt

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions -->

 <div class="parent">
  <div class="box">Lorem</div>
</div>

CSS

.parent { width: 250px; height:125px;}
.box {

    height: 100px;
    background-color: red;
    position: absolute;
    transition: all 1s ease-in-out;
}
.box1 {
    height: 5px;
    background-color: blue;
    color: yellow;
    position: absolute;
    transition: all 1s ease-in-out;
    overflow: hidden;
}

JavaScript

function updateTransition() {
  var el = document.querySelector("div.box");
   
  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }
   
  return el;
}

var intervalID = window.setInterval(updateTransition, 3000);