So I have created a CSS3 animation that does not behave consistently across the different browsers. Here is a quick and dirty overview, and I have included a JSFiddle link at the end. Here is the CSS: .cloned_object { position:absolute; background-color:white; width: 700px; height: 640px; margin: 0; /*for centering purposes*/ -webkit-transition: width 1s, height 1s, top 1s, left 1s, margin 1s; -moz-transition: width 1s, height 1s, top 1s, left 1s, margin 1s; -ms-transition: width 1s, height 1s, top 1s, left 1s, margin 1s ; transition: width 1s, height 1s, top 1s, left 1s, margin 1s; } and the JS function: $('.content_cell').on('click', function(event) { // if the user is on a browser older then IE9 if ($.browser.msie && $.browser.version.substr(0,1)<10) { var $clonedElement = $( this ).clone(true).attr('class','cloned_object content_cell').appendTo('#mainContentTable');