[text animation] rubber band text animation

by naocrrds

HTML

<style>
  #faret {
    text-align: center;
    font-family: sant joan;
    color: #000;
    animation: rubberBand 0.9s;
    animation-iteration-count: infinite;
    font-size: 2rem;
  }

  faret {
    transform: scale3d(1, 1, 1);
  }

  @-webkit-keyframes rubberBand {
    0% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }

    30% {
      -webkit-transform: scale3d(1.25, 0.75, 1);
      transform: scale3d(1.25, 0.75, 1);
    }

    40% {
      -webkit-transform: scale3d(0.75, 1.25, 1);
      transform: scale3d(0.75, 1.25, 1);
    }

    50% {
      -webkit-transform: scale3d(1.15, 0.85, 1);
      transform: scale3d(1.15, 0.85, 1);
    }

    65% {
      -webkit-transform: scale3d(.95, 1.05, 1);
      transform: scale3d(.95, 1.05, 1);
    }

    75% {
      -webkit-transform: scale3d(1.05, .95, 1);
      transform: scale3d(1.05, .95, 1);
    }

    100% {
      -webkit-transform: scale3d(1, 1, 1);
      transform: scale3d(1, 1, 1);
    }
  }

</style>
<div id="faret">Rubber band text</div>