【ブロックにアニメーションをつける】テンプレート・セミオーダーのホームページ制作における小技

1. 左から右へフェードイン

下記クラス名をアニメーションを使用したいブロックに追加する。

※「高度な設定」の「追加 CSS クラス」にコピーして貼り付ける。

anm_mod anm-left

2. 右から左へフェードイン

下記クラス名をアニメーションを使用したいブロックに追加する。

※「高度な設定」の「追加 CSS クラス」にコピーして貼り付ける。

anm_mod anm-right

3. 下からフェードイン（ゆっくり）

下記クラス名をアニメーションを使用したいブロックに追加する。

※「高度な設定」の「追加 CSS クラス」にコピーして貼り付ける。

anm_mod anm-delay

4. 下からフェードイン（はやく）

下記クラス名をアニメーションを使用したいブロックに追加する。

※「高度な設定」の「追加 CSS クラス」にコピーして貼り付ける。

anm_mod anm-fast

5. 文字を1文字ずつ表示（文字系のブロックのみ対象）

下記クラス名をアニメーションを使用したいブロックに追加する。

※「高度な設定」の「追加 CSS クラス」にコピーして貼り付ける。

character-by-character

テキストテキストテキストテキストテキストテキスト

6. 背景色が表示してから画像を表示（画像系のブロックのみ対象）

下記クラス名をアニメーションを使用したいブロックに追加する。

※「高度な設定」の「追加 CSS クラス」にコピーして貼り付ける。

colorBox