一个loading小动画

//html
<div>
     <div class="point point1"></div>
     <div class="point point2"></div>
     <div class="point point3"></div>
     <div class="point point4"></div>
     <div class="point point5"></div>
</div>

//less
.translate-big(@times-begin,@times-middle,@times-end,@opacity-begin,@opacity-middle,@opacity-end,@name){
  @keyframes @name{
    0% {
      transform: scale(@times-begin);
      opacity: @opacity-begin
    }
    50%{
      transform: scale(@times-middle);
      opacity: @opacity-middle
    }
    100% {
      transform: scale(@times-end);
      opacity: @opacity-end
    }
  }
  @-webkit-keyframes @name{
    0% {
      transform: scale(@times-begin);
      opacity: @opacity-begin
    }
    50%{
      transform: scale(@times-middle);
      opacity: @opacity-middle
    }
    100% {
      transform: scale(@times-end);
      opacity: @opacity-end
    }
  }
  @-moz-keyframes @name{
    0% {
      transform: scale(@times-begin);
      opacity: @opacity-begin
    }
    50%{
      transform: scale(@times-middle);
      opacity: @opacity-middle
    }
    100% {
      transform: scale(@times-end);
      opacity: @opacity-end
    }
  }
  @-o-keyframes @name{
    0% {
      transform: scale(@times-begin);
      opacity: @opacity-begin
    }
    50%{
      transform: scale(@times-middle);
      opacity: @opacity-middle
    }
    100% {
      transform: scale(@times-end);
      opacity: @opacity-end
    }
  }
}
.translate-big(1,2.1,1,1,0.4,1,point1);
.point{
  display: inline-block;
  width:20px;
  height:20px;
  -webkit-border-radius:50%;
  -moz-border-radius:50%;
  border-radius:50%;
}
.point1{
  .animation(point1,1s,ease,0.17s,infinite);
  background-color: #ef998b;
}
.point2{
  .animation(point1,1s,ease,0.34s,infinite);
  background-color: #ef8adf;
}
.point3{
  .animation(point1,1s,ease,0.51s,infinite);
  background-color: #a0a2ef;
}
.point4{
  .animation(point1,1s,ease,0.68s,infinite);
  background-color: #9becef;
}
.point5{
  .animation(point1,1s,ease,0.85s,infinite);
  background-color: #efdea6;
}

//编译后的css
.point {
  display: inline-block;
  width: 20px;
  height: 20px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
}
.point1 {
  -webkit-animation: point1 1s ease 0.17s infinite;
  -moz-animation: point1 1s ease 0.17s infinite;
  -ms-animation: point1 1s ease 0.17s infinite;
  -o-animation: point1 1s ease 0.17s infinite;
  animation: point1 1s ease 0.17s infinite;
  background-color: #ef998b;
}
.point2 {
  -webkit-animation: point1 1s ease 0.34s infinite;
  -moz-animation: point1 1s ease 0.34s infinite;
  -ms-animation: point1 1s ease 0.34s infinite;
  -o-animation: point1 1s ease 0.34s infinite;
  animation: point1 1s ease 0.34s infinite;
  background-color: #ef8adf;
}
.point3 {
  -webkit-animation: point1 1s ease 0.51s infinite;
  -moz-animation: point1 1s ease 0.51s infinite;
  -ms-animation: point1 1s ease 0.51s infinite;
  -o-animation: point1 1s ease 0.51s infinite;
  animation: point1 1s ease 0.51s infinite;
  background-color: #a0a2ef;
}
.point4 {
  -webkit-animation: point1 1s ease 0.68s infinite;
  -moz-animation: point1 1s ease 0.68s infinite;
  -ms-animation: point1 1s ease 0.68s infinite;
  -o-animation: point1 1s ease 0.68s infinite;
  animation: point1 1s ease 0.68s infinite;
  background-color: #9becef;
}
.point5 {
  -webkit-animation: point1 1s ease 0.85s infinite;
  -moz-animation: point1 1s ease 0.85s infinite;
  -ms-animation: point1 1s ease 0.85s infinite;
  -o-animation: point1 1s ease 0.85s infinite;
  animation: point1 1s ease 0.85s infinite;
  background-color: #efdea6;
}

效果链接：
https://codepen.io/CKH4/full/ZGNyep