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

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

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

デモのアニメーション

Font Awesome Animation
Font Awesome Animation -GitHub

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

サイトのキャプチャ

Font Awesome Animation

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

Font Awesome Animationの使い方

Step 1: 外部ファイル

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

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

Step 2: HTML

まずは、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

top of page

©2017 coliss