less封装 keyframes animation transformOrigin

// animation

.animation(@n:name,@t:1.5s,@speed:ease,@i:infinite,@a:alternate,@f:forwards){

-webkit-animation: @n @t @speed @i @a @f;

animation: @n @t @speed @i @a @f;

}

用法：

.animation(scale,1.5s,ease,infinite,alternate,forwards);



// .keyframes

.keyframes(@name, @frames){

@-webkit-keyframes @name { @frames(); }

@keyframes @name { @frames(); }

}

用法：

.keyframes(scale,{

0% {

.transform(scale(0.8));

}

100% {

.transform(scale(1));

}

});





// transfrom

.transform(@attr){

-webkit-transform:@attr;

transform:@attr;

}



// transfrom-origin

.transformOrigin(@attr){

-webkit-transform-origin:@attr;

transform-origin:@attr;

}