<div class="logo is-animetion">
  <span>M</span>
  <span>S</span>
  <span>E</span>
  <span>E</span>
  <span>K</span>
</div>
.logo.is-animetion {
  margin-top: 0.6em;
}

.logo.is-animetion span {
  display: inline-block;
  animation: wave-text 1s ease-in-out infinite;
}

.logo.is-animetion {
  span:nth-of-type(1){ animation-delay: 0.0s; }
  span:nth-of-type(2){ animation-delay: 0.1s; }
  span:nth-of-type(3){ animation-delay: 0.2s; }
  span:nth-of-type(4){ animation-delay: 0.3s; }
  span:nth-of-type(5){ animation-delay: 0.4s; }
}

@keyframes wave-text{
  00%{
    transform: translateY(0em);
  }
  60%{
    transform: translateY(-0.6em);
  }
  100%{
    transform: translateY(0em);
  }
}

// Demo
body {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  font-size: 2em;
  font-family: 'Courgette', cursive;
}
View Compiled

External CSS

  1. https://fonts.googleapis.com/css?family=Courgette

External JavaScript

This Pen doesn't use any external JavaScript resources.