JavaScript-function for to attach CSS-animations

/**
  * Adds an CSS-Animation to HTML-element which have a textContent-
  *   property, so that the single chars become animated.
  *
  * @param { string } selector - A CSS-selector which provides HTML-elements
  *   with an text-content property.
  * @param { object } itemTrigger 
  * @param { string } eventTrigger - E.g. 'click', 'focus', 'pointerleave'.
  * @param { string } classWithAnimation - CSS-class with 'animation'-property.
  * @param { number } timeBetween - Time between the single char animations.
  * @param { number } durationAnimation - Time until the animation is removed again.
  */

function addAnimationToText ( selector, itemTrigger, eventTrigger, 
                               classWithAnimation, timeBetween, durationAnimation ) {
  var text = document.querySelector(selector);
  var chars = text.textContent.split('');
  var spans = null;

  function wrapChars() {
    var wrapped = '';

    chars.forEach(function(item) {
      if (/\s/.test(item)) {
        wrapped += '<span>' + item + '</span>';
      } else {
        wrapped += '<span class="wrapped">' + item + '</span>';
      }			
    });

    return wrapped;
  }

  function addAnimationClass() {

    itemTrigger.addEventListener(eventTrigger, function() {

      spans.forEach(function(item, i) {
        const DELAY = i * timeBetween;

        setTimeout(function () {
          item.classList.add(classWithAnimation)
        }, DELAY);
        setTimeout(function () {
          item.classList.remove(classWithAnimation)
        }, DELAY + durationAnimation);
      });
    });
  }

  text.innerHTML = wrapChars();

  spans = document.querySelectorAll(selector + ' .wrapped');
  spans = Array.prototype.slice.call(spans);

  addAnimationClass();
}

var headline = document.querySelector('h1');
var exec = document.querySelector('#exec');
var subHeadline = document.querySelector('.sub-headline');
var paragraph = document.querySelector('p');

addAnimationToText('.main-headline', exec, 'click', 'single-char', 500, 1000);
addAnimationToText('.sub-headline', subHeadline, 'pointerover', 'single-char', 500, 1000);
addAnimationToText('p:first-of-type', paragraph, 'pointerover', 'changing-color-char', 100, 3000);

.wrap {
  width: 800px;
  margin: 50px auto;
  font-size: 32px;
  font-family: verdana, sans-serif;
  background-color: rgba(0, 90, 255, 0.1);
  padding: 20px 30px;
}

.single-char {
  text-shadow: 3px 3px 8px grey;
  color: orange;
  animation: moveY 1s;
  animation-iteration-count: 1;
}

.changing-color-char {
  animation: changeColor 3s;
  animation-iteration-count: infinite;
  font-weight: 800;
}

button:hover {
  cursor: pointer;
  opacity: 0.7;
}

.wrap p {
  font-size: 16px;
}

@keyframes changeColor {
  0% {
    color: red;
  }
  20% {
    color: orange;
  }
  40% {
    color: yellow;
  }
  60% {
    color: lime;
  }
  80% {
    color: blue;
  }
  100% {
    color: violet;
  }
}

@keyframes moveY {
  0% {
    opacity : 0;
    transform : translateY(0);
  }
  10% {
    opacity : 0.5;
    transform : translateY(-10px);
  }
  20% {
    opacity : 0.5;
    transform : translateY(-20px);
  }
  30% {
    opacity : 0.5;
    transform : translateY(-10px);
  }
  40% {
    opacity : 1.0;
    transform : translateY(0);
  }
  50% {
    opacity : 0.5;
    transform : translateY(10px);
  }
  60% {
    opacity : 0;
    transform : translateY(20px);
  }
  70% {
    opacity : 0;
    transform : translateY(30px);
  }
  80% {
    opacity : 0;
    transform : translateY(20px);
  }
  90% {
    opacity : 0;
    transform : translateY(10px);
  }
  100% {
    opacity : 0;
    transform : translateY(0);
  }
}

<div class="wrap">
  <h1 class="main-headline" id="main">Lorem Ipsum</h1>
  <div class="sub-headline" id="sub">Welcome to our homepage!</div>
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
    Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus
    mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
    Nulla consequat massa quis enim.</p>
  <button id="exec">Exec</button>
</div>