Animate.css

class="animated fadeInRight" class="animated fadeInRight"

アニメーション

Webページにアニメーションを実装するクラスを紹介します。
ページを表示した時に要素をアニメーションで表示、スクロールした時に要素をアニメーションで表示など、最近見かけるアニメーションを実装しています。
CSSアニメーションが簡単に利用できる ｢Animate.css｣ を使った内容が中心になります。

アニメーションの種類のデモ Animate.css はこちらです。
アニメーションの種類(クラス名)は、Animate.css -GitHub に一覧があります。

Animate.cssを利用するにはスタイルシート｢animate.css｣を組み込みます。ダウンロードしてHTMLに外部ファイルとして記述します。↓
<link rel="stylesheet" type="text/css" href="animate.css">
或いはCDNを利用しHTMLに外部ファイルとして記述します。↓
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
但し、このテンプレート｢layout_pro｣にはanimate.cssに限らず必要なcss,jsは全て組込み済みです。

アニメーションは効果的に使いましょう。絶対に使いすぎてはいけません。作者のセンスが問われるところです。

ページを表示した時にアニメーション

使い方はシンプルでアニメーションをさせたい要素にクラスanimated とアニメーション種類のクラスを指定します。
<div class="animated fadeInDown">Animate.css</div>

良く利用されるアニメーションの種類
bounceInDown、bounceInLef、bounceInRight、bounceInUp　 fadeInDown、fadeInLef、fadeInRight、bounceInUp　rotateIn　zoomIn　

ディレイ(遅延)クラス　delay-1s ～ delay-5s

スクロールした時にアニメーション

スクロールで指定した div 内の要素をふんわりと表示してくれます。滑らかで気持ちいいですね。
印象的なアニメーションはスクロールアニメーションです。スクロールして要素が表示されるとアニメーションが実行されます。上下左右からふわりと現れる4種類のアニメーションを実装しています。