transition-duration: 0.5s

by kkdaily

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"></div>
</div>

CSS

.parent { width: 250px; height:125px;}
.box {
    width: 50px;
    height: 50px;
    background-color: red;
    font-size: 20px;
    left: 0px;
    top: 0px;
    transform: rotate(45deg);
    position:absolute;
    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top transform -webkit-transform color;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
}
.box1{
    width: 50px;
    height: 50px;
    background-color: blue;
    color: yellow;
    font-size: 18px;
    left: 0px;
    top: 0px;
    width: 50%;
    transform: rotate(45deg);
    position: absolute;
    -webkit-transition-property: width height background-color font-size left top transform -webkit-transform color;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-in-out;
    transition-property: width height background-color font-size left top transform -webkit-transformv color;
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
}

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, 2000);