最近在做项目的时候遇到要使用css3动画的需求，本身直接手写多个@keyframes也是可以的，但是这样显得效率极其低下。于是产生了用less写css3动画能循环使用的想法，说干就干。直接放代码：

一、简单的函数定义使用

[code]//来回闪烁通用代码
//在定义函数的时候可以这么写
//这是一个可以通用的@keyframes

.keyframesFunction (@name,@content){// @变量可以写你想要传进这个函数所用的参数
@keyframes @name{
@content();//你想要执行的动画效果
}
}

=====================示例=====================
//定义时
.keyframesFunction (@name,@content){
@keyframes @name{
@content();
}
}
//引用时写进所需要的css样式中
.layout{
.keyframesFunction (layout,{
0%{background-color:#ffffff;}
50%{background-color: #000000;}
});
animation: layout 1s infinite;
}
=====================示例=====================

=====================生成的css=====================
.layout {
animation: layout 1s infinite;
}
@keyframes layout {
0% {
background-color: #ffffff;
}
50% {
background-color: #000000;
}
}

=====================生成的css=====================

二、拓展使用

简单定义使用中还遇到了一些拓展使用的问题，使用@keyframes实现切换效果不止局限于纯色，还有可能使用到图片。于是修改了一下代码：

[code]===========使用示例================
.keyframesFunction  (@name,@url){
@keyframes @name {
0%{background-image:~"url(@{url}1.png)"}
50%{background-image: ~"url(@{url}2.png)"}
}
}

.layout{
@url:'../images/mini/images_';//改成自己图片的路径
.keyframesFunction(layout,@url);
animation: layout 1s infinite;
}
===========使用示例================

===========生成的css================
.layout {
animation: layout 1s infinite;
}
@keyframes layout {
0% {
background-image: url(../images/mini/images_1.png);
}
50% {
background-image: url(../images/mini/images_2.png);
}
}
===========生成的css================

1.这里要注意的地方就是less中对于图片url的路径引用问题

要使用：【~"url(@{url})"】

可以根据自己的需求增加图片路径后缀

三、参考链接：

1.less作为函数传参

2.less中url的使用方法