JSFiddle - React, Tailwind, and code Playground

HTML

<article  id="a">A</article>
  <article id="b">B 30px height + 4px borders</article>
  <article  id="c">C</article>

CSS

/* The animation code */
@keyframes example {
    from {background-color: red;}
    to {background-color: yellow;}
}

article{
  width:300px;
  height:1000px;
  margin:400px auto;
  border:2px solid red;
  transition: all 5s;
  background-color: red;
}
#b{ height:30px;}

.triggeredCSS3    {      
    animation-name: example;
    animation-duration: 4s; 
    animation-fill-mode: forwards;
    }

JavaScript

/*** original found in https://gist.github.com/eltonmesquita/bd803a21f27b12a58df1 ***/
/*** Based on http://ejohn.org/blog/learning-from-twitter/ ***/
/*** class removal technique explained here: https://css-tricks.com/restart-css-animation/ ***/
function onViewport(el, elClass, offset, callback) {
 // initialize internal variables
  var didScroll = false;
  var this_top;
  var height;  // this is finally never used, so remove this line
  var scrollBottom;
  
  // if no offset is given, set the offset to 0. This means, as soon as the top part 
  // of an becomes visible, it will get the extra class (elClass)
  // You may instead define 100 so the element will get the extra class only if at 
  // least 100 px of the element is visible.
  if(!offset) { var offset = 0; }
 
  // Register an event call back for scrolling. So every time the user scrolls,
  // the didScroll flag will be set to true.
  $(window).scroll(function() {
      didScroll = true;
  });
 
  // start a prediodic timer which will check 10 times in a second
  // if the didScroll flag is set due to a user scroll.
  setInterval(function() {
    // first, check, if the scroll flag is set. Only then something changed in the viewport and
    // we need to check, if the object might be visible now.
    if (didScroll) {
      // reset the flag, as we will handle a scroll change now and only want to act on a new scroll
      didScroll = false;
      // get the current scroll position of the window
      scrollBottom = $(window).scrollTop() + $(window).height();
 
      // Check all elements that are defined by the "el" selector argument 
      $(el).each(function(i){
        // get the elements position (and handle a given offset)
        // NOTE: Within this "each" loop, this refers to a single HTMLElement and not the window!
        this_top = $(this).offset().top - offset;
        // get the elements height. This is currently not used in the code, so you may delete this line.
        // It could be used,...