为了不便调试,先全局装置一个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%;  }