.rotating-word-wrapper {
  position: relative;
  height: 1em;              /* Important: give it height */
  overflow: hidden;
}

.rotating-word-wrapper:before {
  content: "\00a0";
}

.rotating-word {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transform: translateY(100%);
  transition: opacity 0.5s ease, transform 0.5s ease;
  white-space: nowrap;
}

.rotating-word.active {
  opacity: 1;
  transform: translateY(0);
}

.rotating-word.leaving {
  opacity: 0;
  transform: translateY(-100%);
}