SOURCE

@animateDelay: 3;
@emojiShowPaddingTime: 0.25;
@emojiShowTime: 0.375;
@iconShowPaddingTime: 0.3;
@firstIconAnimateDelay: 0.125;
@imgCount: 4;
@allTime: @animateDelay + @imgCount * (@emojiShowPaddingTime + @emojiShowTime) + 2 * @firstIconAnimateDelay + @emojiShowPaddingTime;
@allTimeKey: e('@{allTime}s');

.createEleClass(@imgCount);

.createEleClass(@n, @i: 0) when (@i < @n) {
  @animateName: e('demo-@{i}');
  .ele-class-@{i} {
    animation: @animateName @allTimeKey infinite;
  }
  
  .createEleClass(@n, (@i + 1));
}

.icon {
	animation: iconAnimate @allTimeKey infinite;
}

@keyframes iconAnimate {
  @didHideTime: round(@iconShowPaddingTime / @allTime * 100, 2);
  @didHideTimeKey: e('@{didHideTime}%');
  
  @startShowTime: round((@allTime - @iconShowPaddingTime) / @allTime * 100, 2);
  @startShowTimeKey: e('@{startShowTime}%');
  
  @didShowTime: round((@allTime - @animateDelay) / @allTime * 100, 2);
  @didShowTimeKey: e('@{didShowTime}%');
  
  from {
  	opacity: 1;
    transform: scale(1);
  }
  
  @{didHideTimeKey} {
  	opacity: 0;
    transform: scale(0.5);
  }
  
  @{startShowTimeKey} {
  	opacity: 0;
    transform: scale(0.5);
  }
  
  @{didShowTimeKey} {
  	opacity: 1;
    transform: scale(1);
  }
  
  to {
  	opacity: 1;
    transform: scale(1);
  }
}

.createAnimation(@imgCount);
.createAnimation(@n, @i: 0) when (@i < @n) {
  @startShow: round((@firstIconAnimateDelay + @i * (@emojiShowPaddingTime + @emojiShowTime)) / @allTime * 100, 2);
  @startShowKey: e('@{startShow}%');
  
  @didShow: round((@firstIconAnimateDelay + @i * (@emojiShowPaddingTime + @emojiShowTime) + @emojiShowPaddingTime) / @allTime * 100, 2);
  @didShowKey: e('@{didShow}%');
  
  @startHide: round((@firstIconAnimateDelay + (@i + 1) * (@emojiShowPaddingTime + @emojiShowTime)) / @allTime * 100, 2);
  @startHideKey: e('@{startHide}%');
  
  @didHide: round((@firstIconAnimateDelay + (@i + 1) * (@emojiShowPaddingTime + @emojiShowTime) + @emojiShowPaddingTime) / @allTime * 100, 2);
  @didHideKey: e('@{didHide}%');
  
  @animationName: e('demo-@{i}');
  @keyframes @animationName {
    from {
      opacity: 0;
    }
    
    @{startShowKey} {
      opacity: 0;
    }
    
    @{didShowKey} {
      opacity: 1;
    }
    
    @{startHideKey} {
      opacity: 1;
    }
    
    @{didHideKey} {
      opacity: 0;
    }

    to {
      opacity: 0;
    }
  }
  .createAnimation(@n, (@i + 1));
}