Studioのアニメーション
Studioでは、「条件付きスタイル」を使って、特定の条件下でデザインの見た目や形を変えることができます。この機能を利用して、通常時と条件付きスタイル時の変化を設定し、アニメーションを作り出します。
カーソルを乗せた時のスタイルの変化は、条件付きスタイルのホバーと(in)ホバーで設定します。
それぞれについて詳しくは、次の記事をご覧ください。
作成手順
1. 条件付きスタイル「ホバー」を設定
アニメーションを設定したいボックスをクリックし、エディタ右上の「条件付きスタイル」から「ホバー」を選択します。
ホバーが選択された状態で、ボックスの塗りを変更します。
2. 条件付きスタイル「in ホバー」を設定
テキストボックスを選択し、エディタ右上の「条件付きスタイル」から(in)ホバーを選択します。
※(in)ホバーは、ホバーを設定した要素の中にある要素に、さらに別のスタイルを付け加える時に使います
テキストの色を白色へ変更します。
3. ライブプレビューで確認する
エディタの右上にある「プレビュー」ボタンをクリックして、ライブプレビューを見ながら、設定を微調整などして完成です。