Animating with Transition

You can do a lot of neat animation with just a bit of Javascript and CSS. Just add a transition property to the CSS and modify the style with JS.

Here's the script for that:

<div id="colourbox" class="colourbox">
</div>

.colourbox {
  height: 100px;
  width: 100px;
  background-color: skyblue;
  position: relative;
  left: 0;
  transition: 1s;
}

function animateBox(e) {  
    let box = e.target
  box.style.backgroundColor = "lightcoral"
  box.style.left = "100px";
}

document.getElementById("colourbox").addEventListener('click', animateBox)

Note that I put left: 0 in the CSS, even though it doesn't visibly do anything. Your element should have default values for every properties that the script will modify. Otherwise, the transition might not work.

Here's a version where you can toggle between the two colour/positions.

Open this CodePen if you want to see the code I used for that. Or you can try making it yourself, and then compare the codes.

I should probably write a proper guide for CSS transition some day, since there's a lot about it that might not be obvious. For now, here's the W3Schools reference page for transition.

For prettier transitions, you might not want to keep using the embarassingly basic transition: 1s. Use these easing functions.