<div class="steps">
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
  <i></i>
</div>
<p class="css-typing">Это анимация с использованием временной функции "steps"!</p> 

div {
  width:150px;
  height: 150px;
  background:lightblue;
  position:relative;
}
i {
  position:absolute;
  width: 6px;
  height: 6px;
  border-radius:100%;
  background:darkblue;
  left:0;
  top:0;
  animation: steps 2s infinite;
}
.steps i {
  animation-timing-function: steps(10,end);
}
@keyframes steps {
  0% {
    left:0;
    top:0;
  }
  100% {
    left:145px;
    top:145px;
  }
}
i:nth-child(2) {animation-delay:.1s;}
i:nth-child(3) {animation-delay:.2s;}
i:nth-child(4) {animation-delay:.3s;}
i:nth-child(5) {animation-delay:.4s;}
i:nth-child(6) {animation-delay:.5s;}
i:nth-child(7) {animation-delay:.6s;}
i:nth-child(8) {animation-delay:.7s;}
i:nth-child(9) {animation-delay:.8s;}
i:nth-child(10){animation-delay:.9s;}

#box {
  width:100px;
  height: 100px;
  background:blue;
  margin:10%;
  position:relative;
  animation:size 2s 1 ease alternate both;
}


.css-typing {
    width: 30em;
    white-space:nowrap;
    overflow:hidden;
    animation: type 5s steps(50, end) 1, blick 0.5s steps(5,end) 5s 10;
  font-size:16px;
  font-family: sans-serif;
  border-right: 1px solid #000;
}

@keyframes type{
    0% { width: 0; }
}
@keyframes blick {
  0% {
    border-right: 1px solid #000;
  }
  100% {
    border:none;
  }
}