lessでcssアニメーションを簡単に書く方法

lessを使ってる時にキーフレームアニメーションを簡単に書く方法がないか調べていたら教えてくれているページがあったのでメモ
 参考：LESS CSS でキーフレームアニメーションを楽に書く

view plainprint?

1. // 今回作ったのは、ピコピコ動くアニメーション  
2. // まずはmix-inでアニメーションを指定  
3. .pikopiko() {  
4.  @_r: 10deg;  
5.  from { .rotate(0); }  
6.  5% { .rotate(@_r); }  
7.  10% { .rotate(@_r * -1); }  
8.  15% { .rotate(@_r); }  
9.  20% { .rotate(@_r * -1); }  
10.  23% { .rotate(0deg); }  
11.  to { .rotate(0deg); }  
12. }  
13.   
14. //作ったアニメーションを各ブラウザ用にプレフィックスをつけて指定  
15. //現在、キーフレームアニメーションでプレフィックスが必要なのはwebkitだけらしい  
16. @keyframes pikopiko { .pikopiko(); }  
17. @-webkit-keyframes pikopiko { .pikopiko(); }  
18.   
19. // アニメーションを簡単に指定するmix-inも作成  
20. .animation(@name, @duration: 300ms, @delay: 0, @ease: ease) {  
21.  -webkit-animation: @name @duration @delay @ease;  
22.  -moz-animation: @name @duration @delay @ease;  
23.  -ms-animation: @name @duration @delay @ease;  
24.  -o-animation: @name @duration @delay @ease;  
25.  animation: @name @duration @delay @ease;  
26. }  
27.   
28. .animation-count(@count) {  
29.  animation-iteration-count: @count;  
30.  -webkit-animation-iteration-count: @count;  
31.  -moz-animation-iteration-count: @count;  
32.  -o-animation-iteration-count: @count;  
33.  -ms-animation-iteration-count: @count;  
34. }  
35.   
36. //アニメーションを設定する  
37. .element {  
38.  .animation(pikopiko, 4s);  
39.  .animation-count(infinite);  
40. }  

// 今回作ったのは、ピコピコ動くアニメーション
// まずはmix-inでアニメーションを指定
.pikopiko() {
 @_r: 10deg;
 from { .rotate(0); }
 5% { .rotate(@_r); }
 10% { .rotate(@_r * -1); }
 15% { .rotate(@_r); }
 20% { .rotate(@_r * -1); }
 23% { .rotate(0deg); }
 to { .rotate(0deg); }
}

//作ったアニメーションを各ブラウザ用にプレフィックスをつけて指定
//現在、キーフレームアニメーションでプレフィックスが必要なのはwebkitだけらしい
@keyframes pikopiko { .pikopiko(); }
@-webkit-keyframes pikopiko { .pikopiko(); }

// アニメーションを簡単に指定するmix-inも作成
.animation(@name, @duration: 300ms, @delay: 0, @ease: ease) {
 -webkit-animation: @name @duration @delay @ease;
 -moz-animation: @name @duration @delay @ease;
 -ms-animation: @name @duration @delay @ease;
 -o-animation: @name @duration @delay @ease;
 animation: @name @duration @delay @ease;
}

.animation-count(@count) {
 animation-iteration-count: @count;
 -webkit-animation-iteration-count: @count;
 -moz-animation-iteration-count: @count;
 -o-animation-iteration-count: @count;
 -ms-animation-iteration-count: @count;
}

//アニメーションを設定する
.element {
 .animation(pikopiko, 4s);
 .animation-count(infinite);
}

すげー記述量減った！ ありがたし。 自分1人で作業するならcompassを使うんだけど、黒い画面が苦手な人もいる場合はguiのあるlessで作業してる。