less 循环生成css3动画！（@keyframes）

为了方便调试，先全局安装一个less

1. npm install -g less
2. 创建style.less文件,写入less语法
3. 使用lessc styles.less styles.css将less文件编译成css文件

需要一个0%到100%的每一帧动画

代码：

.mask(@n) when (@n =< 100%) {
    @{n} {
      mask: linear-gradient(
        90deg,
        #000 @n,
        transparent 10%,
        transparent 10%
      );
      width: @n;
    }
    .mask(@n+1);
  }
  @keyframes maskMove {
    .mask(0%);
  }

css文件输出结果

@keyframes maskMove {
  0% {
    mask: linear-gradient(90deg, #000 0%, transparent 10%, transparent 10%);
    width: 0%;
  }
  1% {
    mask: linear-gradient(90deg, #000 1%, transparent 10%, transparent 10%);
    width: 1%;
  }
  2% {
    mask: linear-gradient(90deg, #000 2%, transparent 10%, transparent 10%);
    width: 2%;
  }
  3% {
    mask: linear-gradient(90deg, #000 3%, transparent 10%, transparent 10%);
    width: 3%;
  }
  4% {
    mask: linear-gradient(90deg, #000 4%, transparent 10%, transparent 10%);
    width: 4%;
  }
  5% {
    mask: linear-gradient(90deg, #000 5%, transparent 10%, transparent 10%);
    width: 5%;
  }
......
  99% {
    mask: linear-gradient(90deg, #000 99%, transparent 10%, transparent 10%);
    width: 99%;
  }
  100% {
    mask: linear-gradient(90deg, #000 100%, transparent 10%, transparent 10%);
    width: 100%;
  }