ホバー時に要素を表示する

ホバー操作を利用して、ホバー時に要素を表示します。

このチュートリアルの内容:

1. ホバーエントリのアニメーションを作成する
2. ホバー終了時のアニメーションを作成する 
3. 他のコンポーネントにアニメーションを実装する

ホバー入力のアニメーションを設定する

1. リンクブロックを選択します（トリガーとして機能します）
2. インタラクションパネルで、要素トリガーの横にある追加記号をクリックし、選択からマウスホバーを選択します。
3. ホバー時のイベントでは、アクションリストからアニメーションの開始を選択します。
4. 時間アニメーションの近くにある追加記号をタップします
5. 名前を付ける（例：スライドイン）
6. アニメーション化したいコンポーネントを選択します（例：ハートコンポーネント）
7. 時間指定アクションの近くにある追加記号を押して、オプションからシフトを選択します。
8. シフトの場合は、x軸に値を割り当てます（例：-100）
9. タイミングの横にある初期状態として設定のトグルをオンにします
10. アニメーション化する他の要素についても手順6～9を繰り返します。 
11. インタラクションパネル（Shiftキーを押しながら）でシーケンス内のコンポーネントを選択します
12. 右クリックして複製する
13. Shiftの場合は、x軸を元の値（0ピクセル）に戻します。
14. タイミングについては、イージングを変更します（例：イーズアウト）
15. 継続時間を短くする（例：0.2秒）

ホバー終了時のアニメーションを作成する 

1. 作成したアニメーションを終了します 
2. インタラクションパネルの「ホバーアウト時」のアクションリストから「アニメーションを開始する」を選択します。
3. タイムアニメーションで、スライドインの横にある歯車アイコンをタップし、複製を選択します。
4. スライドイン2を有効にする
5. 名前を変更します（例：優雅にスライドアウト）
6. シーケンスから複製されたアニメーション（例：ハートとH3価格）を消去します。 
7. タイムラインの残りのアニメーションを選択します
8. タイミングの横にある初期状態として設定をオフにします
9. 以前と同じようにイージングと継続時間を調整します

他のコンポーネントにアニメーションを実装する

1. シーケンス内の任意の時間指定アクションを選択します 
2. インパクトの横にあるクラスを選択します
3. このクラスのすべての要素をクリックし、このクラスの子のみを選択します。
4. ホバー開始とホバー終了の両方で1～3を繰り返します。

‍