less自定义animation

    创建animation.less:

/*
  @name: 规定需要绑定到选择器的 keyframe 名称
  @duration:规定完成动画所花费的时间，以秒或毫秒计
  @function:规定动画的速度曲线
  @count规定动画应该播放的次数   infinite表示无限次数
*/
.animation(@name:name,@duration:8s,@function:linear,@count:infinite){
  animation: @name @duration @function @count;
  -webkit-animation: @name @duration @function @count;
  -o-animation: @name @duration @function @count;
  -moz-animation: @name @duration @function @count;
}

创建animation.css

@-webkit-keyframes robotMove {
    0% {
        transform: translateX(0px) rotateY(0deg);
    }
    50% {
        transform: translateX(-500px) rotateY(180deg);
    }
    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}

@keyframes robotMove {
    0% {
        transform: translateX(0px) rotateY(0deg);
    }
    49% {
        transform: translateX(-490px) rotateY(0deg);
    }
    50% {
        transform: translateX(-500px) rotateY(180deg);
    }
    100% {
        transform: translateX(0px) rotateY(180deg);
    }
}

创建项目需要的index.less样式文件

@import '../css/less/lib';
@import '../css/lib/animation.css';

.robot {
	position: absolute;
	left: 900px;
	top: 170px;
	width: 167px;
	height: 191px
	background: url(../img/robot.png) no-repeat;

	.animation(robotMove);
	}