<section>
  <h1>
    <span class="no">no</span><span class="de">de</span>
  </h1>
</section>
body {
  font-family: Montserrat, sans-serif;
}

section {
  min-height: 100vh;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

h1 {
  font-weight: 900;
  font-size: 5rem;
  line-height: 0.78;
  text-transform: uppercase;
  color: #026e00;
}

span {
  display: inline-block;
}
anime({
  targets: '.no',
  easing: 'linear',
  loop: true,
  duration: 7000,
  keyframes: [
    { translateX: 0 },
    { translateX: '100%' },
    { translateY: 0 },
    { color: '#000' },
    { color: '#000' },
    { translateY: '-100%' },
    { translateX: 0 },
    { translateY: 0 },
    { color: '#026e00' },
    { color: '#026e00' },
    { translateY: 0 }
  ]
})

anime({
  targets: '.de',
  easing: 'linear',
  loop: true,
  duration: 7000,
  keyframes: [
    { translateY: '-100%' },
    { translateX: '-100%' },
    { translateY: 0 },
    { color: '#000' },
    { color: '#000' },
    { translateY: 0 },
    { translateX: 0 },
    { translateY: 0 },
    { color: '#026e00' },
    { color: '#026e00' },
    { translateY: 0 }
  ]
})

External CSS

  1. https://web2033.com/cdn/css/normalize/default.css
  2. https://fonts.googleapis.com/css?family=Montserrat:900

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js