ホバーで表示

ホバーインアニメーションの構築

1. トリガーとするリンクブロックを選択します
2. インタラクションパネルで、エレメントトリガーの横にあるプラス記号をクリックし、「Mouse Hover 」をドロップダウンメニューから選択します
3. ホバー時には、アクションメニューから「Start an Animation」を選択します
4. Time Animations の横にあるプラス記号をクリックし、名前を付けます（例: フライイン）
5. アニメーションを適用したい要素を選択します（例: ハート要素）
6. Timed Actionsの横にあるプラス記号をクリックし、ドロップダウンメニューから「移動」を選択します
7. 「Move」の下で、x軸に値を設定します（例: -100）
8. タイミングの横にあるスイッチを「initial state」に切り替えます
9. 他のアニメーションを適用したい要素に対しても、ステップ6から9を繰り返します
10. インタラクションパネルで、タイムライン内の要素を選択（Shiftキーを押しながら）
11. 右クリックして複製します
12. 「Move」の下で、x軸を元の位置（0ピクセル）に変更します
13. Timingの下で、Easing（例: Easing）を変更します
14. Durationを短縮します（例: 0.2秒）

ホバーアウトアニメーションの構築

1. 作成したアニメーションを閉じます
2. インタラクションパネルで、ホバーアウト時に、「Action」メニューから「Start an Animation」を選択します
3. タイムアニメーションの下で、Fly inの横にある歯車アイコンをクリックし、「Duplicate」を選択します
4. Fly in 2をアクティブにします
5. 名前を変更します（例: 豪華にフライアウト）
6. タイムラインからアニメーションを削除します（例: ハートとH3の価格）
7. タイムライン内の残りのアニメーションを選択します
8. タイミングの横にある「Set as initial state」のスイッチをオフに切り替えます
9. EasingとDurationを調整します（前と同様）

他の要素へのアニメーションの適用

1. タイムライン内のどれかの Timed Actionsを選択します
2. Affectの横にある選択をクリックし、クラスを選択します
3. All elements with this class を選択し、Only children with this classを選択します
4. ホバーインとホバーアウトの両方に対して、1から3を繰り返します