# アニメーション

## フェードアウト

| %{STYLEGUIDE_PAGE}-fade-out-strong
| %{STYLEGUIDE_PAGE}-fade-out
| %{STYLEGUIDE_PAGE}-fade-out-light

    <span class="%{STYLEGUIDE_PAGE}-icon-bg ... %{STYLEGUIDE_PAGE}-fade-out-strong">...</span>
    <span class="%{STYLEGUIDE_PAGE}-icon-bg ... %{STYLEGUIDE_PAGE}-fade-out">...</span>
    <span class="%{STYLEGUIDE_PAGE}-icon-bg ... %{STYLEGUIDE_PAGE}-fade-out-light">...</span>

## フェードイン

| %{STYLEGUIDE_PAGE}-fade-in-strong
| %{STYLEGUIDE_PAGE}-fade-in
| %{STYLEGUIDE_PAGE}-fade-in-light

    <span class="%{STYLEGUIDE_PAGE}-icon-bg ... %{STYLEGUIDE_PAGE}-fade-in-strong">...</span>
    <span class="%{STYLEGUIDE_PAGE}-icon-bg ... %{STYLEGUIDE_PAGE}-fade-in">...</span>
    <span class="%{STYLEGUIDE_PAGE}-icon-bg ... %{STYLEGUIDE_PAGE}-fade-in-light">...</span>

## ポップアップ

通知があります | %{STYLEGUIDE_PAGE}-popup-top
通知があります | %{STYLEGUIDE_PAGE}-popup-right
通知があります | %{STYLEGUIDE_PAGE}-popup-bottom
通知があります | %{STYLEGUIDE_PAGE}-popup-left

    <div class="%{STYLEGUIDE_PAGE}-popup-top">...</div>
    <div class="%{STYLEGUIDE_PAGE}-popup-right">...</div>
    <div class="%{STYLEGUIDE_PAGE}-popup-bottom">...</div>
    <div class="%{STYLEGUIDE_PAGE}-popup-left">...</div>

通知があります | %{STYLEGUIDE_PAGE}-popup-top-child
通知があります | %{STYLEGUIDE_PAGE}-popup-right-child
通知があります | %{STYLEGUIDE_PAGE}-popup-bottom-child
通知があります | %{STYLEGUIDE_PAGE}-popup-left-child

    <div class="%{STYLEGUIDE_PAGE}-popup-top-child">
    	<span class="%{STYLEGUIDE_PAGE}-icon-bg ... %{STYLEGUIDE_PAGE}-popup-child"></span>
    </div>
    <div class="%{STYLEGUIDE_PAGE}-popup-right-child">
    	<span class="%{STYLEGUIDE_PAGE}-icon-bg ... %{STYLEGUIDE_PAGE}-popup-child"></span>
    </div>
    <div class="%{STYLEGUIDE_PAGE}-popup-bottom-child">
    	<span class="%{STYLEGUIDE_PAGE}-icon-bg ... %{STYLEGUIDE_PAGE}-popup-child"></span>
    </div>
    <div class="%{STYLEGUIDE_PAGE}-popup-left-child">
    	<span class="%{STYLEGUIDE_PAGE}-icon-bg ... %{STYLEGUIDE_PAGE}-popup-child"></span>
    </div>

## ズーム

| 拡大（デフォルト→拡大）

    <span class="%{STYLEGUIDE_PAGE}-icon-bg ... %{STYLEGUIDE_PAGE}-zoom-in">...</span>

| 縮小（デフォルト→縮小）

    <span class="%{STYLEGUIDE_PAGE}-icon-bg ... %{STYLEGUIDE_PAGE}-zoom-out">...</span>

### ズームして表示

アニメーションを開始するために`active`クラスが必要になります。サンプルを表示するにはサンプルボタンをクリックしてください。

拡大
|  |

    <div class="active">
    	<span class="%{STYLEGUIDE_PAGE}-icon-bg ... %{STYLEGUIDE_PAGE}-zoom-in-show">...</span>
    </div>

縮小
|  |

    <div class="active">
    	<span class="%{STYLEGUIDE_PAGE}-icon-bg ... %{STYLEGUIDE_PAGE}-zoom-out-show">...</span>
    </div>

## スライド

アニメーションを開始するために`active`クラスが必要になります。サンプルを表示するにはサンプルボタンをクリックしてください。

上からのスライド
上からスライドします |

    <div class="active">
    	<div class="%{STYLEGUIDE_PAGE}-panel %{STYLEGUIDE_PAGE}-slide-top">...</div>
    </div>

下からのスライド
下からスライドします |

    <div class="active">
    	<div class="%{STYLEGUIDE_PAGE}-panel %{STYLEGUIDE_PAGE}-slide-bottom">...</div>
    </div>

左からのスライド
左からスライドします |

    <div class="active">
    	<div class="%{STYLEGUIDE_PAGE}-panel %{STYLEGUIDE_PAGE}-slide-left">...</div>
    </div>

右からのスライド
右からスライドします |

    <div class="active">
    	<div class="%{STYLEGUIDE_PAGE}-panel %{STYLEGUIDE_PAGE}-slide-right">...</div>
    </div>

## 遅延

サンプルを表示するにはサンプルボタンをクリックしてください。

左から

右から

    <ul class="%{STYLEGUIDE_PAGE}-list-inline active">
    	<li class="%{STYLEGUIDE_PAGE}-zoom-in-show %{STYLEGUIDE_PAGE}-delay">...</li>
    </ul>

    <ul class="%{STYLEGUIDE_PAGE}-list-inline active">
    	<li class="%{STYLEGUIDE_PAGE}-zoom-in-show %{STYLEGUIDE_PAGE}-delay-reverse">...</li>
    </ul>

ランダム

    <ul class="%{STYLEGUIDE_PAGE}-list-inline active">
    	<li class="%{STYLEGUIDE_PAGE}-zoom-in-show %{STYLEGUIDE_PAGE}-delay-third">...</li>
    	<li class="%{STYLEGUIDE_PAGE}-zoom-in-show %{STYLEGUIDE_PAGE}-delay-first">...</li>
    	<li class="%{STYLEGUIDE_PAGE}-zoom-in-show %{STYLEGUIDE_PAGE}-delay-fourth">...</li>
    	<li class="%{STYLEGUIDE_PAGE}-zoom-in-show %{STYLEGUIDE_PAGE}-delay-second">...</li>
    </ul>

## Javascriptが読み込めない環境のとき

上記のアニメーションをするスタイルを使ったとき、Javascriptが読み込めない環境では、必要な情報が表示されない可能性があります。この問題に対応するには、`html`タグに`.no-js`を記述して、modernizr.jsを読み込んでください。Javascriptが読み込まれる環境ではmodernizr.jsが動作し、`.no-js`を削除するので、Javascriptが使用できる環境とそうではない環境を分別することができます。

具体的には、以下のように記述してください。

    <!DOCTYPE html>
    <html class="no-js" lang="ja">
    ...
    <script src="/js/ファイルのパス/modernizr.js"></script>

a-blog cmsでは、管理画面で使用しているオフキャンバスで使用しているため、デフォルトでmodernizr.jsを同梱しています。以下のように記述しても正常に動作します。

    <!DOCTYPE html>
    <html class="no-js" lang="ja">
    ...
    <script src="/js/off-canvas/modernizr.js"></script>

### `.no-js`に対応しているアニメーションのクラス

以下のクラス名の親要素に`.no-js`があるとき、opacityを1にし、transformで位置や大きさを変えているものはデフォルトに戻します。

- `.%{STYLEGUIDE_PAGE}-slide-top`
- `.%{STYLEGUIDE_PAGE}-slide-left`
- `.%{STYLEGUIDE_PAGE}-slide-bottom`
- `.%{STYLEGUIDE_PAGE}-slide-right`

- `.%{STYLEGUIDE_PAGE}-zoom-in-show`
- `.%{STYLEGUIDE_PAGE}-zoom-out-show`