[CSS]アイコンのデザインに合ったかわいい動きをclassを加えるだけで実装できるスタイルシート -Font Awesome Animation

Post on:2014年2月26日

sponsors

classを加えるだけでさまざまなアイコンが利用できるFont Awesomeを使って、各アイコンのデザインに合ったかわいい動きをアニメーションで与えるスタイルシートを紹介します。

ベルはリンリン♪、いいねは上下に、スピナーはぐるぐる動きます。

実際の動作は、下記ページで楽しめます。
Chrome, Safari, Firefox, IE10+でお楽しみください。

左はアニメーションのトリガーをページのロード時、右はホバー時にしたものです。

Font Awesome Animationの使い方

Font Awesomeと当スタイルシートを外部ファイルとして記述します。

<link rel="stylesheet" href="font-awesome.min.css">
<link rel="stylesheet" href="font-awesome-animation.min.css">

まずは、Font Awesomeのアイコンを実装してみます。
2番目のベルの実装です。

<i class="fa fa-bell faa-ring"></i> faa-ring

ロード時にベルが鳴るようにアニメーションさせます。
classに「animated」を加えるだけOK

<i class="fa fa-bell faa-ring animated"></i> faa-ring

ホバー時も簡単です。
classに「animated-hover」を加えるだけ！

<i class="fa fa-bell faa-ring animated-hover"></i> faa-ring