Zero Block:トリガーアニメーション

トリガーは、段階的なアニメーションの一部です。トリガー アニメーションを操作するには、このガイドから段階的なアニメーションの基本を学ぶ必要があります。

トリガーアニメーションを作成するには、ステップバイステップのアニメーションの設定を開始する必要があります。これを行うには、要素設定を開き、[ステップバイステップのアニメーション]セクションで[追加]をクリックします。

アニメーションをトリガーするイベントのタイプを選択します。トリガー アニメーションは、ホバーまたはクリックでのみ機能します。

[トリガーの追加] をクリックし、アニメーションをトリガーする Zero Block の要素を選択します。アニメーションは、この要素をクリックまたはカーソルを合わせると開始されます。

トリガーを選択したら、アニメーション ステップを追加します。たとえば、ボタンのクリックで形状の動きを右に 300px 追加しました。

「要素の再生」ボタンと「すべて再生」ボタンに加えて、Tildaを使用すると、ブラウザでアニメーションをプレビューできます。

ブラウザーで 2 つのタブ (Zero Block とプレビュー モードで同じページ) を開きます。

このようにして、Zero Blockで行った変更を2番目のタブでプレビューすることで確認できます。変更内容をページに反映させるには、プレビュー ページを更新します。