Page Widget How to - Fly in articles and sidebar with jQuery and CSS animations

Question

We would like to know how to fly in articles and sidebar with jQuery and CSS animations.

Answer

Revised from 
http://fiddle.jshell.net/gabrieleromanato/km3TE


<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
  src='http://code.jquery.com/jquery-1.8.3.js'></script>
<style type='text/css'>
.module {<!-- w  w  w. j  av  a2s . c  o  m-->
    -webkit-animation: flyin 600ms ease-in;
    -moz-animation: flyin 600ms ease-in;
    -o-animation: flyin 600ms ease-in;
    -ms-animation: flyin 600ms ease-in;
    animation: flyin 600ms ease-in;
}
@-webkit-keyframes flyin {
    from {
        opacity: 0;
        -webkit-transform: scale(2);
    }
    to {
        -webkit-transform: scale(1);
        opacity: 1;
    }
}
@-moz-keyframes flyin {
    from {
        opacity: 0;
        -moz-transform: scale(2);
    }
    to {
        -moz-transform: scale(1);
        opacity: 1;
    }
}
@-o-keyframes flyin {
    from {
        opacity: 0;
        -o-transform: scale(2);
    }
    to {
        -o-transform: scale(1);
        opacity: 1;
    }
}
@-ms-keyframes flyin {
    from {
        opacity: 0;
        -ms-transform: scale(2);
    }
    to {
        -ms-transform: scale(1);
        opacity: 1;
    }
}
@keyframes flyin {
    from {
        opacity: 0;
        transform: scale(2);
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}
body {
    padding: 50px;
}
.main,
.sidebar {
    padding: 1em;
}
.main {
    float: left;
    width: 60%;
}
.sidebar {
    float: right;
    width: 20%;
}
.module {
    border: 0.5em solid #ccc;
    background: #eee;
    padding: 1.5em;
    margin: 0 0 2em 0;
}
h1 {
    margin-top: 0;
}
</style>
<script type='text/javascript'>//<![CDATA[ 
$(function(){
$(function() {
    $("#add-sidebar-module").on("click", function() {
        $("<div />", {
            'class': "module",
            text: "I'm new here."
        }).prependTo("#sidebar");
    });
    $("#add-article").on("click", function() {
        $("<div />", {
            'class': "module",
            html: "<h1>Title</h1><p>text text text.</p>"
        }).prependTo("#main");
    });
});
});//]]>  
</script>
</head>
<body>
  <section class="main" id="main">
    <h1>Any content added to this page will fly in.</h1>
    <div>
      <button id="add-sidebar-module">Add Sidebar Module</button>
      <button id="add-article">Add Article</button>
    </div>
    <div>
      <p>Pellentesque habitant morbi tristique senectus et netus et
        malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
        vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
        amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
        placerat eleifend leo.</p>
    </div>
    <div>
      <p>Pellentesque habitant morbi tristique senectus et netus et
        malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat
        vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit
        amet quam egestas semper. Aenean ultricies mi vitae est. Mauris
        placerat eleifend leo.</p>
    </div>
  </section>
  <aside class="sidebar" id="sidebar">
    <div>
      <p>Pellentesque habitant morbi tristique senectus et netus et
        malesuada fames ac turpis egestas.</p>
    </div>
    <div>
      <p>Pellentesque habitant morbi tristique senectus et netus et
        malesuada fames ac turpis egestas.</p>
    </div>
  </aside>
</body>
</html>

The code above is rendered as follows: