关于前端: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%;
  }