CSS Transition Tools (prefix & animate)

gistfile1.js

/**
 * Add cross-browser prefix with javascript
 * @param node
 * @param style
 * @param value
 */
function cssPrefix(node, style, value)
{
    if(node)
    {
        node.style['Webkit' + style] = value;
        node.style['Moz' + style] = value;
        node.style['ms' + style] = value;
        node.style['o' + style] = value;
        node.style[style] = value;
    }
}

/**
 * Animate using CSS transitions
 * @param node
 * @param style
 * @param from
 * @param to
 * @param durationInMs
 * @param callback
 */
function cssAnimate(node, style, from, to, durationInMs, callback)
{
    if(durationInMs == null) { durationInMs = 500; }
    // Set the startposition:
    cssPrefix(node, 'TransitionDuration', 0);
    cssPrefix(node, style, from);
    // force browser re-render by setting the end-position after 1ms:
    setTimeout(function(){
        cssPrefix(node, 'TransitionDuration', durationInMs + 'ms');
        cssPrefix(node, style, to);
    }, 1);
    // Execute a possible callback:
    if(callback != null)
    {
        setTimeout(callback, durationInMs);
    }
}