トランジションは、要素の異なる状態間のスムーズなアニメーションを作成するのに役立ちます。継続時間とイージングタイプをカスタマイズして、独自のトランジションを作成することができます。一般的な使用例としては、要素のホバー状態のスムーズな遷移を作成し、ホバー時に突然変化しないようにすることが挙げられます。

このレッスンでは

  1. ボタンのホバー状態をスタイル設定する
  2. ホバー時のアニメーションを滑らかにするトランジションを設定する

について説明しています。


1.ボタンのホバー状態をスタイルで指定する

  1. ボタンを選択する
  2. ボックスシャドウを追加して、すべてが思い通りに見えるようにスタイルを設定します。
  3. ホバー状態へ移動
  4. シャドウの強度と距離を増加させる
  5. ボタンがない状態に戻す

2.ホバー時のアニメーションを滑らかにするトランジションを設定する

トランジションを追加し、プロパティドロップダウンからボックスシャドウを選択します。

  1. 500msの継続時間を追加する
  2. イージングはそのままにします。
  3. ボタンにカーソルを合わせると、影の強さと距離が滑らかに変化するのがわかります。


Step one on the left, click on the plus icon in the Transitions effect row. Step two on the right, select the Box Shadow property from the background section in the property dropdown menu.
Step three, change Duration to 500 MS.
A blue button with text "Contact us!" is displayed twice. On the left, the button is in its normal state. On the right, the button is in its hover state with a box shadow behind it.h

‍