less封装 keyframes animation transformOrigin

最新推荐文章于 2023-07-19 13:58:01 发布

木子木木的专栏

最新推荐文章于 2023-07-19 13:58:01 发布

阅读量1.3k

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_37029814/article/details/83271054

版权

CSS 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

// 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;

}