最近想實(shí)現(xiàn)一個(gè)css3動(dòng)畫的函數(shù)，但是創(chuàng)建@keyframe時(shí)，老是碰到一個(gè)問題，就是將函數(shù)function作為參數(shù)傳遞。研究了半天，發(fā)現(xiàn)可以這樣寫。

.function-name(@function-param){
  @function-param();
}
.function-name({

});

不過這種寫法不能用于普通的函數(shù)參數(shù)傳遞，目前只發(fā)現(xiàn)適用于keyframes動(dòng)畫，看下面

/**
* 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);
}

然后我們?nèi)绾蝿?chuàng)建不同各種瀏覽器內(nèi)核的@keyframes呢？

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

解析之后，就生成了下面這樣的css。

@-moz-keyframes zindex {
  from {
    z-index: 100;
  }
  to {
    z-index: -100;
  }
}
@-o-keyframes zindex {
  from {
    z-index: 100;
  }
  to {
    z-index: -100;
  }
}
@-webkit-keyframes zindex {
  from {
    z-index: 100;
  }
  to {
    z-index: -100;
  }
}
@keyframes zindex {
  from {
    z-index: 100;
  }
  to {
    z-index: -100;
  }
}

這是不是你想要的呢？嘻嘻，快拿去用吧~