jQuery - Dynamic Flying HTML

Fiddle exploring how to add some HTML and make it fly into view once the document is ready.

HTML

<div id="fiddleHook1" style="background-color:Blue"></div>
<div id="fiddleHook"></div>

CSS

.enter-stage-right {
    -moz-animation-duration: 3s;
    -webkit-animation-duration: 3s;
    -moz-animation-name: slidein;
    -webkit-animation-name: slidein;
}
@-moz-keyframes slidein {
    from { margin-left: 100%; }
    to { margin-left: 10%; }
}
@-webkit-keyframes slidein {
    from { margin-left: 100%; }
    to { margin-left: 10%; }
}

JavaScript

(function (app, $, undefined) {

    $(document).ready(function () {
        console.log('document.ready');
        var hook = $('#fiddleHook1');
        hook.html("<div style='width: 100px; height: 100px;'><i> Hi There! </i></div>");
          hook.html("<div style='width: 100px; height: 100px;'><i> Hi There2! </i></div>");
        hook.addClass('enter-stage-right');
    });


})(window.app = window.app || {}, jQuery)