On gists

Yellow Fade Technique with Modern CSS (@starting-style)

CSS CSS trick

fade.css Raw #

/* https://www.bram.us/2023/05/24/the-yellow-fade-technique-with-modern-css-using-starting-style/ */

div {
  transition: background-color 0.5s;
  background-color: transparent;

  @starting-style {
    background-color: yellow;
  }
}

with-animation.css Raw #

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

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

p.item {
  padding: 10px;
}

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

*/