CSS Transitions

[adapted from http://slides.html5rocks.com/#slide42]

use 'transistionend' event handler
document.getElementById('box').className = 'margin-left'; 
document.getElementById('box').className = 'margin-right'; 
document.getElementById('box').className = 'margin-left'; 
document.getElementById('box').className = 'margin-right'; 
document.getElementById('box').className = 'left'; 
document.getElementById('box').className = 'right'; 
document.getElementById('box').className = 'up'; 
document.getElementById('box').className = 'down'; 
document.getElementById('box').className = 'left up'; 
document.getElementById('box').className = 'right down';