CSS3のkeyframe AnimationをFPSベースで設定する「fpsAnimation.js」

CSS3のkeyframe AnimationをFPSベースで設定する「fpsAnimation.js」を作ったので公開しておきます。

fpsAnimation.js

このライブラリを読み込んだ後に、次のようなスクリプトを実行することでCSS3のkeyframe Animationに変換してくれます。

fpsAnimation(
	"div:hover",//target
	"sampleAnime",//animation name
	100,//fps
	[{
		f:10,
		c:"height:100px;width:500px;"
	},{
		f:10,
		c:"height:500px;width:500px;"
	},{
		f:10,
		c:"height:500px;width:100px;"
	},{
		f:10,
		c:"height:100px;width:100px;"
	}]
);

sample

このサンプルでは以下のCSSが生成されます。

@keyframes sampleAnime {
	25% { height:100px;width:500px; }
	50% { height:500px;width:500px; }
	75% { height:500px;width:100px; }
	100% { height:100px;width:100px; }
}
@-webkit-keyframes sampleAnime {
	25% { height:100px;width:500px; }
	50% { height:500px;width:500px; }
	75% { height:500px;width:100px; }
	100% { height:100px;width:100px; }
}
@-moz-keyframes sampleAnime {
	25% { height:100px;width:500px; }
	50% { height:500px;width:500px; }
	75% { height:500px;width:100px; }
	100% { height:100px;width:100px; }
}
@-o-keyframes sampleAnime {
	25% { height:100px;width:500px; }
	50% { height:500px;width:500px; }
	75% { height:500px;width:100px; }
	100% { height:100px;width:100px; }
}
@-ms-keyframes sampleAnime {
	25% { height:100px;width:500px; }
	50% { height:500px;width:500px; }
	75% { height:500px;width:100px; }
	100% { height:100px;width:100px; }
}
div:hover{
	animation : sampleAnime 4000ms;
	-webkit-animation : sampleAnime 4000ms;
	-moz-animation : sampleAnime 4000ms;
	-o-animation : sampleAnime 4000ms;
	-ms-animation : sampleAnime 4000ms;
}

fpsAnimationの第1引数にアニメーションを設定するCSSセレクタを記述します。今回のサンプルでは「div:hover」に対してアニメーションを指定しています。

第２引数にはアニメーションの名前を指定します。ページ内で利用する他のkeyframe Animationの名前と重複しないように注意してください。

第３引数にはfps、つまり1フレームを何ミリ秒として計算するかを指定します。

第４引数には配列でアニメーションの内容を指定します。fにそのアニメーションを何フレームで行うか、cにアニメーションさせたいCSSの内容を記述します。

MITライセンスで公開しますので自由にお使いください。

関連エントリー

@keyframesとAndroid
CSS3のtransitionでアニメーションするjQueryプラグイン「jQuery transition Animate」
スクロールストップイベントを実装するjQueryプラグイン「jquery.scrollstop.js」
ブロックレベル要素の高さを揃えるheightLine.js

スポンサードリンク

«これからjQueryを始める方へ -入門書の選び方・読み方- | メイン | Sass/Compassで保存した際に非圧縮と圧縮したCSSファイルを出力する»