<div>Dept. of <span aria-label="Enthusiasm" data-splitting>Enthusiasm</span></div>
body {
  background: #000000;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  font: 600 5vw/1.5 system-ui, sans-serif;
  display: grid;
  place-items: center;
  height: 100vh;
  margin: 0;
}

.splitting .char {
  animation: slide-in 2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  animation-delay: calc(60ms * var(--char-index));
}

@keyframes slide-in {
  0% {
    transform: translateY(-1em) rotate(-0.5turn) scale(0.5);
  }
  20%,
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
  }
}
Splitting();
Run Pen

External CSS

  1. https://unpkg.com/splitting/dist/splitting.css
  2. https://unpkg.com/splitting/dist/splitting-cells.css

External JavaScript

  1. https://unpkg.com/splitting/dist/splitting.min.js

Packages

This Pen doesn't use any packages.