前の記事 ≪:MediumみたいなカッコいいWYSIWYGな編集ができる「jQuery Notebook」
次の記事 ≫:モダンなプログレスバーを表示できるJSライブラリ「nanobar.js」

FontAwsomeのアイコンフォントをCSS3でアニメーションさせる「Font Awesome Animation」

2014年03月06日-はてなブックマーク

スポンサード リンク

Font Awesome Animation

FontAwsomeのアイコンフォントをCSS3でアニメーションさせる「Font Awesome Animation」。
FontAwsome自体は単なるアイコンフォントですが、これにCSS3アニメーション(自動アニメーション、ホバー時)機能を付けたもの。
FontAwsome自体のマークアップが<i class="fa fa-envelope"></i>であれば、classにfaa-horizontal animated 等として追加すれば、指定したアニメーションで再生されます。
FontAwsomeだけじゃなくて、BootstrapのGlyph等でも同様に使えそうですね。



実装コード例。JS不要でCSSを読み込んだらclass追加するだけでOK



関連エントリ

スポンサード リンク

By.KJ : 2014年03月06日 09:00 ブックマークに追加する livedoor Readerで購読 Twitterに投稿

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