STUDIOのアニメーション機能では、ボックスに任意の状態時のトランスフォーム（変形）を設定し、通常時との２点間のトランジションでアニメーションを表現します。

「モーションタブ」の右側エリアでは、ボックスに対し移動/回転/スケールの３種類のトランスフォームを設定できます。例えば、スタイルバー右端の条件付きスタイルのホバーを設定して

と設定すると、ボックスにホバーしたとき、上方向に50px移動し、時計回りに20°傾きながら1.5倍のサイズに拡大するアニメーションが表現できます。

モーションタブの左側エリアでは、トランスフォームをどんな緩急や速さ、時間配分で行うか（＝トランジション）が指定できます。デフォルトでは「ease」のトランジションカーブ、時間「300」、遅延「0」が適用されており、0.3秒かけて自然な緩急でトランスフォームが起きる状態です。

トランジションカーブは、時間（横軸）に対しするトランスフォーム量（縦軸）の緩急を表し、カーブが水平に近い部分ほど緩やかに、垂直に近い部分ほど早いスピードでスタイル変化が再生されます。

トランジションパネルを開くと、11パターンのベーシックに使えるトランジションカーブが準備されており、その中からイメージに近い動きのカーブを選択できます。
もっとこだわりたい場合は、パネル下部のカーブの両端点から伸びるハンドルを引っ張り、任意の緩急を描いてください。

「時間」欄では、アニメーションを何ミリ秒かけて行うかを設定できます。数字を大きくするとゆっくり時間をかけて動き、小さくするとクイックな遷移となります。

「遅延」ではアニメーションをスタートするタイミングを、トリガーからどれだけ遅らせるか設定できます。こちらも単位はミリ秒です。例えば先ほどのボックスで遅延を「500」に設定すると、ボックスにマウスオーバーしてから0.5秒後にトランジションが始まります。

コンディションの種類と設定方法について、こちらの記事をご確認ください。

アニメーション 回転 animation motion