<div class="wrap">
  <div class="l">L</div>
  <div class="o">O</div>
  <div class="a">A</div>
  <div class="d">D</div>
  <div class="i">I</div>
  <div class="n">N</div>
  <div class="g">G</div>
</div>

@import url(https://fonts.googleapis.com/css?family=Open+Sans:700);

body {
  background: #333;
  color: #eee;
  font-size: 34px;
  font-family: 'Open Sans'
}

.wrap {
  width: 250px;
  text-align: center;
  position: absolute;
  top: 40%;
  left: 50%;
  margin-left: -125px;
  div {
    display: inline;
    margin: -2px;
  }
}

$animation-duration: 1.75s;
@each $div, $time in ("l", 0), ("o", 0.125), ("a", 0.25), ("d", 0.375), ("i", 0.5), ("n", 0.625), ("g", 0.75) {
  .#{$div} {
    animation: shrinkgrow $animation-duration ease-in-out infinite;
    animation-delay: $animation-duration * $time;
  }
}

@keyframes shrinkgrow {
  0% {    transform: scale(0); }
  12.5% { transform: scale(1); }
  25% {   transform: scale(1); }
  33% {   transform: scale(0); }
  100% {  transform: scale(0); }
}