ホバー時に要素を表示するためのホバーインタラクションを使用します。
ホバーインアニメーションの構築
- トリガーとするリンクブロックを選択します
- インタラクションパネルで、エレメントトリガーの横にあるプラス記号をクリックし、「Mouse Hover 」をドロップダウンメニューから選択します
- ホバー時には、アクションメニューから「Start an Animation」を選択します
- Time Animations の横にあるプラス記号をクリックし、名前を付けます（例: フライイン）
- アニメーションを適用したい要素を選択します（例: ハート要素）
- Timed Actionsの横にあるプラス記号をクリックし、ドロップダウンメニューから「移動」を選択します
- 「Move」の下で、x軸に値を設定します（例: -100）
- タイミングの横にあるスイッチを「initial state」に切り替えます
- 他のアニメーションを適用したい要素に対しても、ステップ6から9を繰り返します
- インタラクションパネルで、タイムライン内の要素を選択（Shiftキーを押しながら）
- 右クリックして複製します
- 「Move」の下で、x軸を元の位置（0ピクセル）に変更します
- Timingの下で、Easing（例: Easing）を変更します
- Durationを短縮します（例: 0.2秒）
ホバーアウトアニメーションの構築
- 作成したアニメーションを閉じます
- インタラクションパネルで、ホバーアウト時に、「Action」メニューから「Start an Animation」を選択します
- タイムアニメーションの下で、Fly inの横にある歯車アイコンをクリックし、「Duplicate」を選択します
- Fly in 2をアクティブにします
- 名前を変更します（例: 豪華にフライアウト）
- タイムラインからアニメーションを削除します（例: ハートとH3の価格）
- タイムライン内の残りのアニメーションを選択します
- タイミングの横にある「Set as initial state」のスイッチをオフに切り替えます
- EasingとDurationを調整します（前と同様）
他の要素へのアニメーションの適用
- タイムライン内のどれかの Timed Actionsを選択します
- Affectの横にある選択をクリックし、クラスを選択します
- All elements with this class を選択し、Only children with this classを選択します
- ホバーインとホバーアウトの両方に対して、1から3を繰り返します
