fontawesomeの便利なアニメーションを使ってみました。
超簡単で色んなアニメーションをアイコンに付けれるので是非使ってみてください。
では参ります〜
Font Awesome Animationの準備
すぐ終わりますww
僕は開発用ではなく圧縮版のcss(Minified CSS)を使いました。
まずここからMinified CSSを入手。
Font Awesome Animation
これをコピってCSSファイルを作る。
今回はfont-awesome-animation.cssという名前にしました。
次にhtmlに以下を追加します。
＊CSSファイルの場所を間違えないように注意
<link rel="stylesheet" href="../font-awesome-animation.css">
以上で準備完了です。
Font Awesome Animationの使い方
先ほどのリンクにもありますがSNSボタンを例を挙げて説明します。
こんな感じでFont AwesomeでSNSアイコンを準備します。
<div class="sns">
<a href=""><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
<a href=""><i class="fa fa-facebook-square" aria-hidden="true"></i></a>
<a href=""><i class="fa fa-get-pocket" aria-hidden="true"></i></a>
</div>
これに先ほどのリンクの”Usage”にあるアニメーションを追加します。
<div class="sns">
<a href=""><i class="fa fa-twitter-square faa-tada animated-hover" aria-hidden="true"></i></a>
<a href=""><i class="fa fa-facebook-square faa-tada animated-hover" aria-hidden="true"></i></a>
<a href=""><i class="fa fa-get-pocket faa-tada animated-hover" aria-hidden="true"></i></a>
</div>
こんな感じで簡単にアニメーションが使えます。
animated-hoverでホバーした時にアニメーションが発動するようにもできます。
以上です。
色んなアニメーションがあるので試してみてください。
簡単ですが、以上ですww
では〜