Clickdrop experiment

This has the benefit of transitioning on opacity, which is much faster than transitioning on background-color

HTML

<div class='container'>
  Not activated
  <div class="active-foreground">
    Activated-empty
  </div>
</div>

CSS

.container {
  background-color: black; 
  color: white; 
  position: relative; 
  width: 200px;
}

.active-foreground {
  position:absolute; 
  top: 0; bottom: 0; left: 0; right: 0; 
  background-color: white;
  transition: opacity 0.5s;
  color: black;
  opacity: 0;
}

.active-foreground.shown {
  opacity: 1;
}

JavaScript

var foreground = document.getElementsByClassName("active-foreground")[0];
setTimeout(function() {
  foreground.className = 'active-foreground shown';
  
  setTimeout(function() {
    foreground.className = 'active-foreground';
  }, 1000);
  
}, 1000);