Animate CSS Properties

HTML

<div id="box" class="square"></div>
<div id="bg" class="square"></div>

CSS

body {
   margin: 50px; 
}
.square {
   position: absolute;
   width: 100px;
   height: 100px;
   -webkit-transition: all 1s;
    -moz-transition: all 1s;
    transition: all 1s;
}
#bg {
    background: orange;
    z-index: -1;
    
}

JavaScript

var dir = true;
var box = document.getElementById('box');

var rotate = function() {
    
    if(dir == false) {
        box.style.transform = 'rotate(45deg)';
        box.style.webkitTransform = 'rotate(45deg)';
        box.style.background = "blue";
    } else {
        box.style.transform = 'rotate(-45deg)';
        box.style.webkitTransform = 'rotate(-45deg)';
        box.style.background = "green";
    }

    dir = !dir;
    
}
setInterval(rotate, 100);