CSS3 – アニメーションが簡単に出来るCSSライブラリ。


CSS3 – アニメーションが簡単に出来るCSSのセット。

クラス名を付けるだけの簡単な作業で様々なアニメーションを実装できる便利なスタイルシートを配布しているサイトの紹介。

Animate.css

 

animate.css
animate.cssの使い方

公式サイトの「Donwnload Animate.css」のリンクからスタイルシートをダウンロード。

head部分にスタイルシートまでのリンクを記述。

アニメーションさせたい要素へ下記のようにクラスを追加する。

(例:bounceさせたい時)

アニメーションの無限ループをさせたい時は、クラス「infinite」を追加。

各種アニメーションの確認はAnimate.cssのプルダウンメニューから選択することで確認できます。

Hover.css

hover.css使い方

hover.cssもHTMLの要素へクラスを指定するだけで手軽にアニメーションを実装出来るCSSライブラリ。

hover.cssの使い方

Hover.cssのDownload on GitHubよりzipファイルをダウンロード、解凍したら編集フォルダへスタイルシートを移動。

head部分にスタイルシートまでのリンクを記述。

アニメーションさせたい要素へ下記のようにクラスを追加する。

 

Hover.css-一覧のデモサイトはこちら
Hover.css-クラス一覧


この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL