Less之美

封装动画 keyframes

解决浏览器兼容写法。

.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);
}

调用

.animation-start .anm_name{
    .keyframes(all,anm_name,{
        0% {
            height: 0;
            opacity: 0;
        }
        100% {
           height: 144px;
           opacity: 1;
        }
    });
}

结果

@-moz-keyframes anm_name {
  0% {
    height: 0;
    opacity: 0;
  }
  100% {
    height: 144px;
    opacity: 1;
  }
}
@-o-keyframes anm_name {
  0% {
    height: 0;
    opacity: 0;
  }
  100% {
    height: 144px;
    opacity: 1;
  }
}
@-webkit-keyframes anm_name {
  0% {
    height: 0;
    opacity: 0;
  }
  100% {
    height: 144px;
    opacity: 1;
  }
}
@keyframes anm_name {
  0% {
    height: 0;
    opacity: 0;
  }
  100% {
    height: 144px;
    opacity: 1;
  }
}

舒服