Point：Studioでアニメーションやエフェクトを設定する
Studioでは、アニメーションやエフェクトなど、動きのある表現を条件付きスタイルを利用して設定します。
サイト内のボックス要素に、通常時のスタイルと条件付きスタイルの両方を設定すると、その差分がアニメーションとして再生されます。アニメーションの動き方は「イージング」「時間」「遅延」の3項目で調整します。
条件付きスタイルの「スクロール」では、スクロールに伴って要素が動くエフェクト表現を設定できます。
画像を二つ重ね、条件付きスタイルの「ホバー」でホバー時のみ上に重ねた画像を透明に設定すると、透けた下の画像が見えて画像が切り替わったように見えます。上に重ねた画像の不透明度を下げることで、下の画像を見せる仕組みです。
ホバー時に画像を切り替える設定をする
注意：タッチデバイスではホバー操作がないため、意図しない見え方になる場合があります。
ホバー時に表示したい画像①をページに配置します。
その上に、通常時に表示したい画像②を重ねて配置します。親画像のサイズを大きくすると配置しやすくなります。
上に重ねた画像②のサイズを、幅100%、高さ100%に設定します。
通常時に表示したい画像②を選択します。
レイヤーパネルを使用すると、画像選択を正確に行うことができます。
右パネル上部の[条件スタイル]をクリックし、メニューから[ホバー] を選択します。
[カスタム設定]ボタンをクリックします。
[外観]設定の不透明度を0に設定します。
設定後は、右パネルの [ホバー] 表示右にある[戻る] （矢印アイコン）ボタンをクリックし、通常時の設定に戻ります。
ライブプレビューで動作を確認します。
公開中のサイトを編集している場合は、公開パネルでサイトを更新します。この操作を行うまで、公開サイトへは反映されません。