less写动画兼容

今天用less写动画，然后写到兼容，可让我想了会儿

less变量如下

.mixin(@attr,@val) {
  @{attr}: @val;
  -webkit-@{attr}: @val;
  -moz-@{attr}: @val;
  -o-@{attr}: @val;
  -ms-@{attr}: @val;
}
.keyframes (@name, @frames) {
  @-webkit-keyframes @name { @frames(); }
  @-moz-keyframes @name { @frames(); }
  @-ms-keyframes @name { @frames();}
  @-o-keyframes @name { @frames(); }
  @keyframes @name { @frames(); }
}

上面的名字可以随便起

如何使用？

如下

.slowWalk {
  .mixin(animation-name,person-slow);
  .mixin(animation-duration,950ms);
  .mixin(animation-iteration-count,infinite);
  .mixin(animation-timing-function,steps(1, start));
}

.keyframes (person-slow, {
  0% {
    background-position: -0px -291px;
  }
  25% {
      background-position: -602px -0px;
  }
  50% {
      background-position: -302px -291px;
  }
  75% {
      background-position: -151px -291px;
  }
  100% {
      background-position: -0px -291px;
  }
});

解析后

.slowWalk {
  animation-name: person-slow;
  -webkit-animation-name: person-slow;
  -moz-animation-name: person-slow;
  -o-animation-name: person-slow;
  -ms-animation-name: person-slow;
  animation-duration: 950ms;
  -webkit-animation-duration: 950ms;
  -moz-animation-duration: 950ms;
  -o-animation-duration: 950ms;
  -ms-animation-duration: 950ms;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  animation-timing-function: steps(1, start);
  -webkit-animation-timing-function: steps(1, start);
  -moz-animation-timing-function: steps(1, start);
  -o-animation-timing-function: steps(1, start);
  -ms-animation-timing-function: steps(1, start);
}
@-webkit-keyframes person-slow {
  0% {
    background-position: 0px -291px;
  }
  25% {
    background-position: -602px 0px;
  }
  50% {
    background-position: -302px -291px;
  }
  75% {
    background-position: -151px -291px;
  }
  100% {
    background-position: 0px -291px;
  }
}
@-moz-keyframes person-slow {
  0% {
    background-position: 0px -291px;
  }
  25% {
    background-position: -602px 0px;
  }
  50% {
    background-position: -302px -291px;
  }
  75% {
    background-position: -151px -291px;
  }
  100% {
    background-position: 0px -291px;
  }
}
@-ms-keyframes person-slow {
  0% {
    background-position: 0px -291px;
  }
  25% {
    background-position: -602px 0px;
  }
  50% {
    background-position: -302px -291px;
  }
  75% {
    background-position: -151px -291px;
  }
  100% {
    background-position: 0px -291px;
  }
}
@-o-keyframes person-slow {
  0% {
    background-position: 0px -291px;
  }
  25% {
    background-position: -602px 0px;
  }
  50% {
    background-position: -302px -291px;
  }
  75% {
    background-position: -151px -291px;
  }
  100% {
    background-position: 0px -291px;
  }
}
@keyframes person-slow {
  0% {
    background-position: 0px -291px;
  }
  25% {
    background-position: -602px 0px;
  }
  50% {
    background-position: -302px -291px;
  }
  75% {
    background-position: -151px -291px;
  }
  100% {
    background-position: 0px -291px;
  }
}