Yellow Fade

by Atinux

HTML

<div class="items-container">
  <p>
    <a href="#" class="add-more">+ Add More</a>
  </p>
  <p class="item">New item in the list</p>
</div>

CSS

@keyframes yellowfade {
  from {
    background: yellow;
  }
  to {
    background: transparent;
  }
}

p.item-highlight {
  animation: yellowfade 1s;
}


/* Irrelevant CSS */

p.item {
  padding: 10px;
}

JavaScript

$(function() {
  $('.add-more').on('click', function(e) {
    e.preventDefault();
    var first = $('.item').first().clone().addClass('item-highlight');
    first.appendTo('.items-container');
  });
});