Point：Studioでアニメーションやエフェクトを設定する
Studioでは、アニメーションやエフェクトなど、動きのある表現を条件付きスタイルを利用して設定します。
サイト内のボックス要素に、通常時のスタイルと条件付きスタイルの両方を設定すると、その差分がアニメーションとして再生されます。アニメーションの動き方は「イージング」「時間」「遅延」の3項目で調整します。
条件付きスタイルの「スクロール」では、スクロールに伴って要素が動くエフェクト表現を設定できます。
ホバー時に端から色が変わるボタンを作成する手順
端から色が変わる表現は、親ボックスの[ホバー]と子要素の[in ホバー]を組み合わせて作成します。
親ボックスにホバー条件を作成し、内部のボックスを左右方向に拡大すると、左端から色が広がる見た目になります。
手順1. ボタンを作成する
デフォルトパーツを使用してボタンを配置し、デザイン調整までを行います。
ボタンを配置します。
追加パネル
[パーツ]タブ内の[ボタン]から、ボタンパーツを追加できます。
必要に応じて、ボタンのデザインを調整します。デザイン設定の操作方法は、以下のヘルプ記事コレクションを参考にしてください。
手順2. ボタンにボックスを追加して、変形を設定する
色の変化を設定するためのボックスをボタン内に追加します。
ボタン内のテキストボックスを選択した状態で、新しいボックスを追加します。
追加したボックスに以下の設定をします。設定は右パネルの[ボックス]タブで行います。パネルが閉じている場合は、右パネルを開いてください。
[レイアウト]：幅100%、高さ100%
[外観]：背景色を黒
[ポジション]：位置を絶対位置
[はみ出し]：非表示
右パネルの[変形]タブで以下の設定をします。
[拡大・縮小]
X軸（↔︎）：0%
Y軸（↕︎）：100%
[原点]
左中央
手順3. 親ボックスに「条件付きスタイル：ホバー」を設定する
ボタンの親ボックスを選択し、右パネル上部の[条件スタイル]をクリックし、[ホバー]を選択します。
ホバー時のスタイル設定モードで、[不透明度]を100％に設定します。
手順4. 追加したボックスに「条件付きスタイル：in:ホバー」を設定する
新しく追加した黒い背景のボックスを選択して、右パネル上部の[条件スタイル]をクリックし、[in:ホバー]を選択します。
in:ホバー時のスタイル設定モードで、以下の設定をします。
[不透明度]：100%
[変形]
[拡大・縮小]
X軸（↔︎）：0%
Y軸（↕︎）：100%
[原点]
左中央
[アニメーション]
[時間]：0.5秒
手順5. テキストボックスに「条件付きスタイル：in:ホバー」を設定する
テキストボックスを選択して、[ポジション]の重ね順を「2」に設定します。
右パネル上部の[条件スタイル]をクリックし、[in:ホバー]を選択します。
in:ホバー時のスタイル設定モードで、[タイポグラフィ]の[色]を白に設定します。
手順6. 設定の確認をして、公開する
エディタの右上の矢印ボタン（プレビューボタン）をクリックして、ライブプレビューを見ながら、設定を微調整します。
その他のデザインも含めて全ての設定が完了したら、サイトの公開または更新をして、公開サイトへ反映します。