LESS CSS でキーフレームアニメーションを楽に書く

CSS で変数や関数を使えるよう拡張して再利用性を高めた言語 LESS。

• Getting started | Less.js

この LESS を使ってキーフレームアニメーションを楽に書いてみようと思う。現状の LESS ではスマートには書けないので、できるだけ労力の少ない方法で書く。

まずはキーフレームの内容を mixin として定義する。

.fade-in() {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

そして @keyframes ルールを定義。このときに必要なプリフィクスを付けてあげる。

@keyframes fade-in { .fade-in(); }
@-webkit-keyframes fade-in { .fade-in(); }

現時点で必要なプリフィクスは -webkit のみ。Firefox は 16.0 から、Opera は 12.5 から不要。

• @keyframes - CSS | MDN

StatCounter によると、2012年12月1日から2013年1月27日の日本における Firefox のシェアは 14.52% で、そのうち 88% がベンダプリフィクスなしで @keyframes を使える。プリフィクスが必要なのは全体の 1.74%。2013年1月1日からだと 1.61% まで下がる。今後半年で 1% 近くにまで下がる見通し。2013年2月の Firefox 15 以下の割合は 1.38%

Opera ユーザは自分でなんとかするだろうから特別な対応は不要だ。