CSS3 Transition to highlight new elements created in JQuery -

i want use css3 color transition apply highlight-fading color effect (yellow transparent) new elements appended markup using jquery.

css

#content div {     background-color:transparent;     -moz-transition:background-color 2s;     -webkit-transition:background-color 2s;     -o-transition:background-color 2s;     transition:background-color 2s; }  #content div.new {     background-color:yellow; } 

html

<div id="content"></div> <a id="add-element" href="#">add new element</a> 

js

$('#add-element').click(function() {     var newelement = $('<div class="new">new element</div>');     $('#content').append(newelement);     newelement.removeclass('new'); }); 

when click link, new element created. class "new" (background color yellow) , it's appended html markup. should able remove "new" class trigger background color transition transparent (or whatever other color). i'm doing wrong, since background color of new element shown transparent, no transition effect. know can in jquery ui, i'd use css3 transitions.

jsfiddle here:

http://jsfiddle.net/paulaner/fvv5q/

i able work css3 animation:

@-webkit-keyframes yellow-fade {       0% {background: yellow;}    100% {background: none;} }  @keyframes yellow-fade {    0% {background: yellow;}    100% {background: none;} }  .highlight {    -webkit-animation: yellow-fade 2s ease-in 1;    animation: yellow-fade 2s ease-in 1; } 

just apply highlight class new elements:

$('#add-element').click(function() {      var newelement = $('<div class="highlight">new element</div>');      $('#content').append(newelement);  }); 

i tested in ie 10, chrome, safari, , latest ff , works there. wont work in ie 9 , below...

http://jsfiddle.net/nprather/wksrv/3/

i got method book in safari books online: http://bit.ly/11ivv4m