<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); }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js