<header>
  <h1>
      <div>C</div>
      <div>O</div>
      <div>M</div>
      <div>I</div>
      <div>N</div>
      <div>G</div>
      <div></div>
      <div>S</div>
      <div>O</div>
      <div>O</div>
      <div>N</div>
  </h1>
</header>

@import url('https://fonts.googleapis.com/css?family=Oswald');
* {
  margin: 0;
}
header {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #BE93C5;  /* fallback for old browsers */
  background: linear-gradient(to right,   #7BC6CC, #BE93C5); 
}
@mixin transition {
  @for $i from 1 through 11 {
    div:nth-child(#{$i}) {
      @keyframes example-#{$i} {
        0% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(8px + $i);
          opacity: $i / 16;
        }
      }
    }
  } 
}
h1 {
  color: white;
  font-family: 'Oswald', sans-serif;
  padding-right: 1em; 
  @include transition;
  @for $i from 1 through 11 {
    div:nth-child(#{$i}) {
      display: inline-block;
      text-shadow: 2px 2px 3px #3D6366;
      animation-name: example-#{$i};
      animation-duration: 3s;
      animation-iteration-count: infinite;
      animation-delay:(#{$i*0.2s});
      animation-timing-function: ease-in-out;
    }
  }
}