-
首先，温习一下css3的animation属性：
animation属性--来自w3school.com - 然后，在css文件中使用animation 的通常写法：
.div{
width: 100%;
height:447px;
background-repeat: no-repeat;
background-color: #fff;
animation:frams 10s infinite;
}
@keyframes frams {
0%{
background-color:red;
}
50%{
background-color: green;
}
100%{
background-color: blue;
}
}
像这样就可以了，但是less中这样写是不会生效的。下面再看看less怎么写：
/* 定义一个动画（需要设置至少一个形参name） */
.donghua(@DHname){
@keyframes @DHname {
0%{
background-color:red;
}
50%{
background-color: green;
}
100%{
background-color: blue;
}
}
};
/* 调用定义的动画（传入实参name）*/
.donghua(myDongHua); // 名称
/*
1、定义动画属性 （动画有6条默认的属性，详情可访问https://www.w3school.com.cn/cssref/pr_animation.asp）
2、@animation-name,@animation-duration,@animation-timing-function,@animation-delay,@play-state,@animation-iteration-count
3、此处只需引入你需要的属性，不需要的不能引入，否则会报错
*/
.animation(@animation-name,@animation-duration,@animation-timing-function){
animation: @arguments;
}
/* 在样式中引入animation（注意参数即属性）*/
.divBackGroud{
width: 100%;
height: 300px;
background-color:red;
.animation(myDongHua,5s,infinite); // 1|动画名 2|动画时间 3|播放函数(比如：循环等)
}
- 总结一下大概需要四步；
- 定义一个动画，并且设置相关入参；
- 调用定义的动画，并传参；
- 定义动画属性（只需要定义自己需要的）；
- 把定义好的动画属性引入到类对象
