2011/11/13
要注目！CSSとJavaScriptで作るアニメーション「Animatable」
最近、CSSだけで作るアニメーションというのが流行っています。CSS3であればtransitionという要素でアニメーションが起こせますが、さらにJavaScriptを使って多彩なアニメーションに対応させたのがAnimatableです。 0
色々な画像が並んでいます。マウスオーバーでアニメーションが実行されます。
0
6番は曲線が変化するアニメーションです。
0
2番は背景画像がアニメーションします。
0
12番はドロップシャドーです。
0
fromとtoののところで実際に設定するCSSプロパティが分かります。
0
data-fromとdata-toでプロパティを指定します。
0
AnimatableはいわばFlashのアニメーションに似ています。最初のフレームをdata-fromで指定して、最終的な変化をdata-toとします。この間の変化をAnimatableが補完してくれるということです。DOMが変化するので他の要素に影響を与えてしまう場合もあるかも知れませんが、アイディア次第で面白いアニメーションが作れそうです。 0
AnimatableはJavaScript、CSS製のソフトウェアです。ソースコードは公開されていますが、ライセンスは明記されていませんのでご注意ください。 0
プレミアムユーザには“MOONGIFTはこう見る”、記事の一行概要、追加スクリーンショット、デモや追加URLが表示されます。登録（500円/月）はこちらから！ プレミアムユーザのログインはこちらから 0
MOONGIFTの関連記事
このエントリーを含むTwitter
アンケート