CSS3 Transition to highlight new elements created in JQuery

by

I was able to get this to work with css3 animation. Just apply the highlight class to new elements:

$('#add-element').click(function() {
  $('<div class="highlight">new element</div>').appendTo('#content');
});
@keyframes yellow-fade {
  0% {
    background: yellow;
  }
  100% {
    background: none;
  }
}

.highlight {
  animation: yellow-fade 2s ease-in 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="add-element">Add element</button>
<div id="content"></div>

I tested in IE 10, Chrome, Safari, and latest FF and it works there. Probably won’t work in IE 9 and below…

https://jsfiddle.net/nprather/WKSrV/3/

Leave a Comment