前の記事 ≪:指定エレメントのフォントサイズを自由に大小させられるシンプルなjQ...
次の記事 ≫:2011年3月24日 管理人のブックマーク

グラフィカルに加速度を作って要素をCSS3アニメーションさせられる「Ceaser」

2011年03月24日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
Ceaser - CSS Easing Animation Tool - Matthew Lein

グラフィカルに加速度を作って要素をCSS3アニメーションさせられる「Ceaser」。
単純にアニメーションさせるだけではなく、加速度をつけたほうがよりリアルに活き活きと動かすことが出来ますが、そのアニメーションの加速度指定をベジエ曲線を描く要領で指定出来ます。



ベジエ曲線を指定したら「Left」「Width」といったボタンをクリックし、動きを確認出来ます。
動きを作ったら、*-transition: のCSS3プロパティが生成されるので、コピペで使うことが出来る模様。

関連エントリ
関連の記事検索:アニメーション, CSS3, CSS
スポンサード リンク

By.KJ : 2011年03月24日 11:07 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)