Webサイトにはクリックすると大きさが変わったり、フェードイン・フェードアウトなどの“動き”があります。

要所で使われていると、わかりやすさやオシャレ度もアップします！

この記事では、アニメーションの種類と具体的な活用方法を解説します。

エレメントを選択してスタイルパネルのアニメーションを押下すると、以下2種類のアニメーションを設定できます。

・不透明度 : 背後の色を透過させない度合い

・X、Y : X軸(横軸)、Y軸(縦軸)への移動

不透明度とX・Yを反映させる前後の数値を指定します。

不透明度の数値は0を指定すると完全に透明になり、1で完全に不透明（はっきり見えている状態）になります。

また、Y軸方向での20pxの指定は、下方向に移動します。逆に-20pxを指定すれば、上方向に移動します。

次に、時間で変化にかかるまでの時間、遅延で遅延させる時間を指定します。

最後に、easeで変化の動きの加速度を指定します。今回はease-inを指定したので、徐々に加速するように表示されます。

設定した挙動の確認は、アニメーションの横の再生アイコンを押下してください。

Before・Afterの回転に20degを指定すると、左方向に回転します。逆に-20degを指定すれば、右方向に回転します。

ScaleXとScaleYそれぞれに拡大・縮小する値を指定します。2次元で縦と横にエレメントが拡大・縮小します。

「1.5」を指定すればエレメントの1.5倍に拡大し、「0.5」を指定すればエレメントの0.5倍に縮小します。

その他、基準点・遷移でのease・時間・遅延はアニメーションに合わせて指定してください。

設定した挙動の確認は、アニメーションの横の再生アイコンを押下します。