d3-cssTransition.html

<!DOCTYPE html>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="d3-cssTransition.js"></script>
<body>
<script>
    // demo of d3 cssTransition plugin

    var div = d3.select("body")
            .append("div")
            .style({position: 'absolute', left: '200px', top: '200px', width: '100px', height: '100px', background: 'red'})
            .transition()
            // using "end" allows d3 to cancel the cssTransition when the .transition is
            // interrupted
            .each("start" /* or end */, function() {
                d3.select(this)
                        .cssTransition(
                        {
                            // now you can do any kind of hardware-accelerated transform
                            // and you don't have to create two transform strings and
                            // interpolate the numbers within using d3.interpolateString
                            // in styleTween or attrTween
                            transform: 'scale(2) rotate(45deg)'
                        },
                        {
                            duration: 5000,
                            complete: function() {alert('done')}
                        }
                )
            })

</script>
</body>