ホバーインタラクションを使って、ホバー時に要素を表示させます。
このレッスンでは
- ホバーインするアニメーションを作成する
- ホバーアウトするアニメーションを作成する
- アニメーションを他の要素に適用する
について説明しています。
1. ホバーするためのアニメーションを作成する
- リンクブロックを選択する（トリガーにするため）。
- Interactionsパネルで、Element Triggerの隣にあるプラス記号をクリックし、ドロップダウンメニューからMouse Hoverを選択する。
- 「オンホバー」で、「アクション」メニューから「アニメーションを開始」を選択します。
- [Time Animations]の横にあるプラス記号をクリックします。
- 名前を付けます（例：Fly in）。
- アニメートする要素を選択します（例：ハート要素）。
- 時間指定アクションの横のプラス記号をクリックし、ドロップダウンメニューから「移動」を選択します。
- 「移動」で、X 軸に値を指定します (例: -100)
- 「タイミング」の横のスイッチを「初期状態として設定」に切り替えます。
- アニメートさせたい他の要素についても、手順6〜9を繰り返す
- インタラクションパネルで、（シフトを押しながら）タイムライン上の要素を選択します。
- 右クリックで複製
- 「移動」で、X軸を原点（0ピクセル）に戻します。
- 「タイミング」で、「イージング」を変更します（「イージングアウト」など）。
- 継続時間を短くする (例: 0.2 秒)
2. ホバーアウトするアニメーションを作成する
- 作成したアニメーションの外をクリックする
- InteractionsパネルのOn Hover Outで、ActionメニューからStart an Animationを選択します。
- タイムド・アニメーション]の[フライ・イン]の横の歯車のアイコンをクリックし、[複製]を選択します。
- Fly in 2を起動します。
- 名前を変更します（例：Fly out fabulously）。
- タイムラインから重複するアニメーション（例：ハートとH3プライス）を削除します。
- タイムラインの残りのアニメーションを選択します。
- [タイミング]の横にある[初期状態として設定]をオフにします。
- イージングとデュレーションの調整
3. アニメーションを他の要素に適用する
- タイムラインのタイムド・アクションのいずれかを選択します。
- [効果]の横にある[クラス]を選択します。
- このクラスを持つすべての要素]をクリックし、[このクラスを持つ子要素のみ]を選択します。
- ホバーインとホバーアウトの両方で1〜3を繰り返す