Studioでは、「条件付きスタイル」を使って、特定の条件下でデザインの見た目や形を変えることができます。この機能を利用して、通常時と条件付きスタイル時の変化を設定し、アニメーションを作り出します。

それぞれについて詳しくは、次の記事をご覧ください。

フェードしながらスライド表示させるアニメーションの作成手順をご紹介します。

アニメーションを設定したい画像、テキストなどのボックスを、追加パネルからドラッグ＆ドロップで配置します。

配置したボックスをクリックし、エディタの右上にある「条件付きスタイル」から「出現時」を選択します。

「出現時」が選択された状態でモーションタブを開き、次の通り設定します。

移動Y 30px

出現時に上方向に30px上がるような動きになります。

時間 600、遅延 600

アニメーションを再生する「時間」を600（0.6秒）に設定し、アニメーションがスタートするまでの「遅延」を600（0.6秒）に設定します。

不透明度 0

不透明度はデフォルトで1に設定されていますが、数値が0に近づくにつれて透明度が上がります。今回は、通常時に不透明度を1、出現時に0に設定しています。

エディタの右上にある「プレビュー」ボタンをクリックして、ライブプレビューを見ながら、設定を微調整などして完成です。