すべてのコレクション
エディター
レイアウト&デザイン
エレメントにアニメーションを設定する
エレメントにアニメーションを設定する

アニメーションを使ってオシャレなWEBサイトを作ろう

一週間前以上前にアップデートされました

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

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

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

アニメーションの種類

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

  • 不透明度 : 要素の不透明度を変化させる設定

  • 回転 : 上下左右に移動・回転などエレメントを変化させる設定

アニメーションの設定項目

・不透明度

項目

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

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

・回転

項目

  • 回転 : 回転する度合い

  • Scale X・Scale Y : X軸(横方向)、Y軸(縦方向)への拡大・縮小を設定

  • 基準点 : 変化させる基準点の設定

  • 遷移 : 変化の動きの加速度

単位

  • deg(デグ): 角度の単位。90度=90deg

  • ms(ミリセック): 時間の単位「ミリ秒」の表記。1秒=1000ms

  • 時間 : 変化にかかるまでの時間

  • 遅延 : 変化を遅延させる時間

各アニメーションの活用方法

不透明の活用方法

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

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

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

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

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

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

回転の活用方法

エレメントの回転と拡大・縮小

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

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

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

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

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

こちらの回答で解決しましたか?