.dot-apend:after {
  content: '.';
  margin-left: -3px;
  animation: apend 2s steps(1, end) infinite;
}

.dot-animate span {
  animation: animate 1s infinite;
}

.dot-jump span {
  animation: jump 1s infinite;
}

.dot-animate span,
.dot-jump span {
  margin-left: -3px;
  position: relative;
  display: inline-block;
}

.dot-animate span:nth-child(1),
.dot-jump span:nth-child(1) {
  -webkit-animation-delay: 100ms;
  animation-delay: 100ms
}

.dot-animate span:nth-child(2),
.dot-jump span:nth-child(2) {
  -webkit-animation-delay: 200ms;
  animation-delay: 200ms
}

.dot-animate span:nth-child(3),
.dot-jump span:nth-child(3) {
  -webkit-animation-delay: 300ms;
  animation-delay: 300ms
}

@keyframes apend {
  0% {
    opacity: 0
  }

  25% {
    opacity: 1
  }

  50% {
    text-shadow: 5px 0
  }

  75% {
    text-shadow: 5px 0, 10px 0
  }

  100% {
    text-shadow: 5px 0, 10px 0, 15px 0
  }
}

@keyframes animate {
  0% {
    transform: translateX(0)
  }

  25% {
    transform: translateX(3px)
  }

  50% {
    transform: translateX(0px)
  }
}

@keyframes jump {
  0% {
    bottom: 0px;
  }

  25% {
    bottom: 3px;
  }

  50% {
    bottom: 0px;
  }
}