<div id="animation-examples">
  <div class="animation-examples one">
    Sample Text
  </div>
  <br />
  <br />
  <div class="animation-examples two">Sample Text</div>
  <br />
  <br />
  <div class="animation-examples three">Sample Text</div>
</div>

.animation-examples {
  width: 600px;
  height: 120px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  font-family: cambria;
}

.animation-examples.one {
  color: #69D2E7;
  outline: 10px dashed #E0E4CC;
  box-shadow: 0 0 0 10px #69D2E7;
  animation: 1s animateBorderOne ease infinite;
}

@keyframes animateBorderOne {
  to {
    outline-color: #69D2E7;
    box-shadow: 0 0 0 10px #E0E4CC;
  }
}

.animation-examples.two {
  color: #FA2A00;
  outline: 10px dashed #F2D694;
  box-shadow: 0 0 0 10px #FA2A00;
  animation: 2s animateBorderTwo ease infinite;
}

@keyframes animateBorderTwo {
  to {
    outline-color: #FA2A00;
    box-shadow: 0 0 0 10px #F2D694;
  }
}

.animation-examples.three {
  color: #BEF202;
  background: linear-gradient(to bottom, #BEF202 50%, #1B676B 50%);
  background-size: auto 2px;
  outline: 10px dashed #BEF202;
  box-shadow: 0 0 0 10px #1B676B;
  animation: 1s animateBorderThree ease infinite;
}

@keyframes animateBorderThree {
  to {
    outline-color: #1B676B;
    box-shadow: 0 0 0 10px #BEF202;
  }
}

#animation-examples{
  margin: 20px 10px;
}