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 

转载于:https://www.cnblogs.com/xiangsj/p/10175950.html