Visibly render DOM node mutations

observe-mutations.js

const s = document.createElement('style')
s.setAttribute('type', 'text/css')
s.innerHTML = `
@keyframes fade {
  0%    { background: #FF000022; outline: 2px solid #000000; }
  100%  { background: #FF000000; outline: 2px solid #00000000; }
}

.updated {
  animation: fade 1s linear;
}
`
document.head.appendChild(s)

let observer = new MutationObserver(mutationRecords => {
  mutationRecords.forEach(record => {
    const target = record.target
    if (target && target.nodeType === 1) {
      target.classList.add('updated')
      target.addEventListener('animationend', function onAnimationEnd () {
        target.classList.remove('updated')
        target.removeEventListener('animationend', onAnimationEnd)
      })
    }
  })
})

observer.observe(document.querySelector('body'), {
  childList: true,
  subtree: true,
})