.keyframes(fillUpSvg , {
0% {
.transform(translate(0, calc(100px/2)) scaleY(0.6));
}
50% {
.transform(translate(0, 0) scaleY(1));
}
100% {
.transform(translate(0, calc(100px/2)) scaleY(0.6));
}
});
.keyframes(fillUpSvg2 , {
0% {
.transform(translate(0, calc(100px/2)) scaleY(0.7));
}
40% {
.transform(translate(0, 0) scaleY(1));
}
100% {
.transform(translate(0, calc(100px/2)) scaleY(0.7));
}
});
其中keyframes和transform使用的是less的写法
.keyframes(@name) {
@-webkit-keyframes @name {
.-frames(-webkit-);
}
@-moz-keyframes @name {
.-frames(-moz-);
}
@-o-keyframes @name {
.-frames(-o-);
}
@-ms-keyframes @name {
.-frames(-ms-);
}
@keyframes @name {
.-frames();
}
}
.transform(@string) {
-webkit-transform: @string;
-moz-transform: @string;
-ms-transform: @string;
-o-transform: @string;
}
