A simple jQuery example how to animate an HTML element using CSS3 after appending the element to a container. For those that have tried animating an element using CSS3 after it has been appended would have found the element doesn’t animate but here is a solution I’ve found that using keyframe animation worked for me.

jsFiddle Demo

How it works?

  1. Append element using .append()
  2. CSS3 Keyframe animation animates the newly appended element.

HTML Markup


<div id="container">
  <div class="bubble"></div>
</div>

<a id="add-element" href="#">Apend New Element</a>

CSS


#container
{
  margin:20px;
  background-color:#fff;
  padding:15px;
}

.bubble{
  animation: animateElement linear .3s;
  animation-iteration-count: 1;
  background:#e7e7e7;
  margin-bottom:5px;
  width:100%;
  min-height:30px;
  border-radius:10px;
 }

@keyframes animateElement{
  0% {
    opacity:0;
    transform:  translate(0px,10px);
  }
  100% {
    opacity:1;
    transform:  translate(0px,0px);
  }
}

jQuery Script


$('#add-element').click(function() {
    var newElement = $('
'); $('#container').append(newElement); });

Demo

Feel free to check out the jsFiddle demo, modify the CSS3 properties and get creative with the example.

jsFiddle Demo