Less 創建css3動畫@keyframes函數

封裝：

/**
* animation
*/
.keyframes (@prefix,@name,@content) when (@prefix=def) {
  @keyframes @name {
    @content();
  }
}
.keyframes (@prefix,@name,@content) when (@prefix=moz) {
  @-moz-keyframes @name {
    @content();
  }
}
.keyframes (@prefix,@name,@content) when (@prefix=o) {
  @-o-keyframes @name {
    @content();
  }
}
.keyframes (@prefix,@name,@content) when (@prefix=webkit) {
  @-webkit-keyframes  @name{
    @content();
  }
}
.keyframes (@prefix,@name,@content) when (@prefix=all) {
  .keyframes(moz,@name,@content);
  .keyframes(o,@name,@content);
  .keyframes(webkit,@name,@content);
  .keyframes(def,@name,@content);
}

自定義動畫：

.keyframes(all,zindexName,{
  from{z-index :100;}
  to{z-index: -100}
});

調用：

-webkit-animation: zindexName 0.6s linear 0.1s 1;

 

https://www.jianshu.com/p/b19682ba87e2

 

less 語法

https://www.cnblogs.com/feng-wu/p/6040387.html