アニメーション（変形にかける時間）を設定する
要素に通常時のスタイルと条件付きスタイルの両方を設定すると、その差分がアニメーションとして再生されます。このとき、アニメーションの動き方は「イージング」「時間」「遅延」の3項目で調整します。
(1) イージング：変形速度の緩急
(2) 時間：変形にかける時間
(3) 遅延：条件発生後、変形が始まるまでの時間差
アニメーションを削除する
アニメーションを削除するには、条件付きスタイルを削除します。
詳しくは「条件付きスタイルを削除する」を参照してください。
テンプレートで条件付きスタイルとアニメーションを設定する
条件付きスタイルの一部の発生条件（[ホバー]と[出現時]）には、アニメーションのテンプレートが用意されています。
テンプレートを選択すると、条件付きスタイルの設定画面で各項目の値が自動入力されます。値が入った項目は入力欄の色が変わり判別が可能です。
Tips: 通常時のスタイルにアニメーション設定をした場合
[変形]タブで、通常時のスタイルにアニメーションの設定をした場合、その設定は「条件付きスタイルの発生条件が解除されて通常時のスタイルに戻る」動きに適用されます。
(1) イージング
イージングは、アニメーション速度の緩急を表すカーブです。 横軸が時間、縦軸が変形量を表し、どのタイミングで速く・遅く動くかを指定します。
設定方法
パネル上部にある11パターンのカーブから、イメージに近い動きを選択
カーブ両端から伸びるハンドルをドラッグしてカスタマイズし、任意の緩急を作成
グラフ下の座標の数値を直接入力
Tips：オリジナルカーブの複製
カーブの下にある文字列（例：cubic-bezier(0.4,0.4,0.1)をコピーし、他のボックスのトランジションカーブにペーストすることで複製できます。
(2) 時間
アニメーションを何秒かけて行うかを指定する項目です。値を大きくするとゆっくりした動きになり、小さくすると短時間で素早く変化します。小数点以下の値も入力が可能です。
(3) 遅延
条件付きスタイルで設定した条件が発生してから、変形が開始するまでの時間差を指定する項目です。小数点以下の数値も入力できます。
活用例：
複数の画像に異なる値の遅延を設定し、数秒ずつずらして出現させる。
単語内の各文字を別ボックスにし、2文字目・3文字目と順番に遅延値を増やして設定することで、一文字ずつ順番に変形させる。
よくある質問
Q. Studioでできないアニメーションはありますか？
A. 以下のアニメーションは、Studioの機能でサポートされていません。
パララックス
スクロールアニメーション（※外部サービスLottieと併用すれば、近い表現が可能です。）
アニメーション 回転 animation motion アニメーションを消す アニメーションをやめる ふわっと 揺れる 震える 登場 瞬間 しながら