jQuery and CSS animations: fly-in

by Manna

HTML

<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>

CSS

.module {

  -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;
}

JavaScript

$(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");
    });
});