<h1 id="header">DEPT. OF <span id="word">ENTHUSIASM</span></h1>
.ltr {
  display: inline-block;
  animation-delay: calc(var(--i) * 250ms);

  animation-name: wiggleWiggle;
  animation-duration: 2s;
  animation-direction: alternate;
  animation-timing-function: steps(2, end);
  animation-iteration-count: infinite;
}

@keyframes wiggleWiggle {
  20%,
  100% {
    transform: translate(0, 0px);
  }

  0% {
    transform: translate(0, -2px);
  }
  10% {
    transform: translate(0, 0px);
  }
}

/*~~~~~~~~~Ignorables~~~~~~~~~~~~~*/
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  // padding: 0;
}
body {
  background-color: black;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
}
h1 {
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif; /* ?... */
  letter-spacing: 2px;
  font-size: 42px;
  font-weight: 400;
}
p {
  margin: 2em;
  font-size: 24px;
}
View Compiled
// "Mini DIY splitting.js"...
(function () {
  let replacementSpan = document.createElement("span");

  const header = document.getElementById("header");
  const word = document.getElementById("word");

  const charactersArr = word.innerText.split("");
  const replacementSpansArr = charactersArr.map((ltr, indx) => {
    let newSpan = document.createElement("span");
    newSpan.innerText = ltr;
    newSpan.style.setProperty("--i", indx);
    newSpan.classList.add("ltr");
    return newSpan;
  });
  // Terrible procedural code because I can't get Array.reduce to play happliy with Nodes ...
  replacementSpansArr.forEach((spn) => replacementSpan.appendChild(spn));
  header.append(replacementSpan);
  word.remove();
})();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.