FLIP demo

Based on Paul Lewis’ blog post: http://aerotwist.com/blog/flip-your-animations/

HTML

<div id="box"></div>
<!-- CLICK THE BOX TO RUN THE ANIMATION -->

CSS

html, body {
    height: 100%;
    width: 100%;
}
body { margin: 0; }
#box {
    background-color: blue;
    height: 200px;
    width: 200px;
    position: absolute;
}
#box.hidden {
    opacity: 0;
}
#box.transition {
    transition-duration: 1s;
}
#box.end-position {
    top: 100px;
}

JavaScript

box.addEventListener('click', function () {
// Wait for an animation cycle to do the initial DOM manipulation
    requestAnimationFrame(function () {
// Get box and box position; hide the box to avoid flash of initial position
        var box = document.getElementById('box'),
            first = box.getBoundingClientRect();
        box.classList.add('hidden');
// Move the box to its end position and get the position again
        box.classList.add('end-position');
        var last = box.getBoundingClientRect();
// Work out the distance moved between start and end positions
        var invert = first.top - last.top;
// Translate the box back to its start position using the distance value, unhide it
        var transFunc = 'translateY(' + invert + 'px)';
    // Stupid Safari, not unprefixing transforms…
        box.style.webkitTransform = transFunc;
        box.style.transform = transFunc;
        box.classList.remove('hidden');
// At the next animation cycle, add the transition property to the box, then remove the translate value so it animates back to the end position
        requestAnimationFrame(function () {
            box.classList.add('transition');
            box.style.transform = '';
        });
    });
});