アニメーション・エフェクトは、Zero Block 要素に追加できます。アニメーションエフェクトには、基本的なものと高度なもの、または段階的なアニメーションの2種類があります。この記事では、最も基本的なアニメーション設定について説明します。
基本的なアニメーションのオプションは以下の通り：
- アニメーション - アニメーション効果を開始するタイミングに関する様々なオプション；
- Parallax-視差効果の設定；
- ポジショニングエフェクトの設定を固定する。
アニメーション
アニメーションエフェクトには、フェードイン、フェードインライト、フェードインレフト、フェードインアップ、フェードインダウン、 ズームインがあります。
すべてのアニメーションエフェクトには、Duration、Delay、Trigger Offset などの共通設定があります。
Duration はアニメーションエフェクトの継続時間を秒単位で表します。数値はアニメーションエフェクトが実行される秒数です。
Delay はアニメーションエフェクト開始までの遅延時間（秒）です。
トリガーオフセット（Trigger Offset）」は、アニメーションが再生され始めるウィンドウコンテナの下端からのピクセル単位のオフセットです。
上、下、右、左からエレメントが現れるアニメーションエフェクトを使用する場合、「距離（Distance）」オプションは、そのブロックが最初に現れる場所からカバーされる距離を意味します。
「ズームイン（Zoom In）」エフェクトには、「スケール（Scale）」設定があります。100%未満に設定すると、要素は元のサイズにズームされます。100%以上に設定すると、要素はズームアウトして小さく表示されます。
Duration はアニメーションエフェクトの継続時間を秒単位で表します。数値はアニメーションエフェクトが実行される秒数です。
Delay はアニメーションエフェクト開始までの遅延時間（秒）です。
トリガーオフセット（Trigger Offset）」は、アニメーションが再生され始めるウィンドウコンテナの下端からのピクセル単位のオフセットです。
上、下、右、左からエレメントが現れるアニメーションエフェクトを使用する場合、「距離（Distance）」オプションは、そのブロックが最初に現れる場所からカバーされる距離を意味します。
「ズームイン（Zoom In）」エフェクトには、「スケール（Scale）」設定があります。100%未満に設定すると、要素は元のサイズにズームされます。100%以上に設定すると、要素はズームアウトして小さく表示されます。
視差
視差アニメーションには、スクロールとマウス移動の2つの設定があります。
スクロール時の視差
マウス移動時の視差
スクロール時の視差の設定で、速度の設定を見つけます。速度が100％未満の場合、要素はスクロールされているページよりも遅く移動します。速度が100%以上の場合、要素はスクロールされているページよりも速く移動します。
マウス移動時の視差の設定では、X軸とY軸に沿った距離が最大の視差傾斜効果を意味します。
マウス移動時の視差の設定では、X軸とY軸に沿った距離が最大の視差傾斜効果を意味します。
修理
固定アニメーションを設定するとき、要素が固定される場所を選ぶことができます。これは、固定効果を開始するスクリーン領域（スクリーンの上部、中央、下部）です。
Trigger Offset は、要素が Window Top、Window Center、Window Bottom のいずれかに相対的に固定されるポイントです。
Distance は、固定アニメーションの間に要素がカバーすべきピクセル単位の距離です。
Trigger Offset は、要素が Window Top、Window Center、Window Bottom のいずれかに相対的に固定されるポイントです。
Distance は、固定アニメーションの間に要素がカバーすべきピクセル単位の距離です。
固定効果の作り方やページ上での見え方については、「Zero Block のスティッキー・エレメント」の記事をお読みになることをお勧めします。
