USS 遷移は、与えられた持続時間の間にプロパティ値を変化させます。CSS トランジション と同様に、UI Toolkit は多くのイージング関数、可変の遷移時間、設定可能な遷移遅延をサポートしています。遷移の見た目と感覚を変更し、遷移が発生する順序を調整することができます。イージング関数を使用すると、遷移の任意の時点で非連続のアニメーション を発生させることができます。
重要:
translate
属性のデフォルト値は 0
です。これは暗黙のうちに単位にピクセルを使っています。この値から、 translate
というパーセントで表される値に遷移しようとすると、単位の不一致が発生します。ピクセルとパーセントのように、両者の間に一貫した変換がない単位は、単位の不一致の影響を受けやすいのです。color
のように継承されたプロパティに対して遷移を設定すると、親要素で適用された遷移が子要素にカスケードされます。どのプロパティが継承されるかは、USS プロパティリファレンス を参照してください。遷移には以下のプロパティがあります。
プロパティ | USS 構文 | 説明 |
---|---|---|
プロパティ | transition-property |
遷移効果が適用される USS プロパティの名前を指定します。デフォルトは all 。 |
Duration | transition-duration |
遷移効果が完了するまでの時間を指定します。デフォルトは 0s 。 |
イージング機能 | transition-timing-function |
プロパティが時間の経過とともに値間を移動する方法を指定します。デフォルトは、ease 。 |
最大遅延時間 | transition-delay |
遷移効果を開始するタイミングを定義します。デフォルトは 0s 。 |
Transition | transition |
transition-property 、transition-duration 、transition-timing-function 、transition-delay の略記です。 |
UI Builder、USS ファイル、C# スクリプトのコントロールを使用して、ビジュアル要素の遷移プロパティを設定することができます。
UI Builder の Inspector の Transition Animations セクションのコントロールを使用して、ビジュアル要素の遷移ルールを設定することができます。ビジュアル要素に複数の遷移を設定できます。別の遷移を追加するには、 Add Transition をクリックします。削除するには、マイナス記号をクリックします。
Property コントロールは、遷移がどのプロパティに適用されるかを設定します。これを使用するには、ドロップダウンからキーワードまたは USS プロパティ名を選択します。ドロップダウンには検索フィールドがあり、特定のキーワードまたは USS プロパティ名を検索することができます。
ノート: Ignored を選択すると、Unity は指定された継続時間、遅延、イージング関数で定義された遷移を無視します。
Duration コントロールは、継続時間プロパティを設定します。使用するには、テキストフィールドに値を入力して単位を指定するか、単位セレクターで initial (初期値) を選択します。
ヒント: 値の後に s
または ms
を入力するか、initial
を入力することができます。これにより、単位セレクターに表示される単位が自動的に変更されます。また、ドラッグしてテキストフィールドの値を定義することもできます。
Easing コントロールは、イージング機能プロパティを設定します。使用するには、ドロップダウンからイージング関数名を選択します。
Delay コントロールは、遅延プロパティを設定します。使用するには、テキストフィールドに値を入力し、単位を指定するか、単位セレクターで initial を選択します。
ヒント: 値の後に s
または ms
を入力するか、initial
を入力することができます。これにより、単位セレクターに表示される単位が自動的に変更されます。また、ドラッグしてテキストフィールドの値を定義することもできます。
スタイルルールを使用して、ビジュアル要素の遷移プロパティを設定することができます。スタイルルールは、USS ファイル内または UXML ファイル内のインラインで設定することができます。
transition-property
USS プロパティ、キーワード、またはカンマで区切られたリストを指定できます。
以下の表は、transition-property
に適用できるキーワードの一覧です。
キーワード | 説明 |
---|---|
all |
すべてのプロパティに遷移を適用し、先行する遷移はすべてオーバーライドされます。 |
initial |
すべてのプロパティに遷移を適用します。このキーワードはカンマ区切りのリストでは使用できません。 |
none |
すべてのプロパティの遷移を無視します。このキーワードはカンマ区切りのリストでは使用できません。 |
ほとんどの USS プロパティに遷移を適用できます。ただし、一部のプロパティについては、アニメーション化の度合い (animatability) が異なります。USS プロパティのアニメーション化可能度は、以下のように分類されます。
アニメーション化の度合い | 説明 |
---|---|
Fully animatable | イージング機能と遷移時間に応じた速度で、開始値から終了値までの遷移をサポートします。 |
Discrete | 開始値から終了値までの 1 ステップ内の値の間の遷移をサポートします。 |
Non-animatable | 遷移をサポートしません。 |
各プロパティのアニメーション化可能度の可否については、USS プロパティリファレンス を参照してください。
ノート: Unity では、USS トランスフォームプロパティ を介して遷移を使用することを推奨します。他の USS プロパティでも遷移を使用することは可能です。ただし、これらのプロパティで値を変更すると、レイアウトの再計算が発生する可能性があるため、フレームレートの悪いアニメーションになる可能性があります。各フレームでのレイアウトの再計算は、遷移アニメーションのフレームレートを遅くする可能性があります。
例
transition-property: scale;
transition-property: translate, all, rotate;
transition-property: initial;
transition-property: none;
transition-duration
単位つきの数、キーワード、数と単位のカンマ区切りのリストを指定できます。
複数の値を指定する場合、各値は transition-property
で指定された対応するプロパティに適用されます。
transition-duration
は、キーワード initial
(0s
) のみをサポートします。このキーワードはカンマ区切りのリストでは使用できません。
例
transition-duration: 2s;
transition-duration: 800ms;
transition-duration: 3s, 1500ms, 1.75s;
transition-duration: initial;
以下の例では、scale の最初の duration は 1s ですが、all
ではそれを 2s にオーバーライドします。
transition-property: scale, all, rotate;
transition-duration:1s、2s、3s。
transition-timing-function
イージング関数、キーワード、またはカンマ区切りのイージング関数のリストを指定できます。
複数の値を指定する場合、各値は transition-property
で指定された対応するプロパティに適用されます。
transition-timing-function
は、キーワード initial
のみをサポートしています。これは、ease
と同じです。このキーワードはカンマ区切りのリストでは使用できません。
UI Toolkit は、以下のイージング関数をサポートします。
ease
ease-in
ease-out
ease-in-out
linear
ease-in-sine
ease-out-sine
ease-in-out-sine
ease-in-cubic
ease-out-cubic
ease-in-out-cubic
ease-in-circ
ease-out-circ
ease-in-out-circ
ease-in-elastic
ease-out-elastic
ease-in-out-elastic
ease-in-back
ease-out-back
ease-in-out-back
ease-in-bounce
ease-out-bounce
ease-in-out-bounce
各機能の詳細については、transition-timing-function
CSS 属性に関する MDN のドキュメント または easings.net を参照してください。
例
transition-timing-function: linear;
transition-timing-function: ease-in, ease-out-circ, ease-in-out-cubic;
transition-timing-function: initial;
transition-delay
単位つきの数、キーワード、数と単位のカンマ区切りのリストを指定できます。
複数の値を指定する場合、各値は transition-property
で指定された対応するプロパティに適用されます。
transition-delay
は、キーワード initial
(0s
) のみをサポートします。このキーワードは、カンマ区切りのリストでは使用できません。
例
transition-delay: 0s;
transition-delay: 300ms;
transition-delay: 2s, 650ms, 2.75s;
transition-delay: initial;
transition
1 つの遷移、キーワード、またはカンマ区切りの遷移リストを提供できます。遷移内のプロパティはスペースで区切り、以下の順序で指定します。
transition-property
transition-delay
transition-duration
transition-timing-function
transition
はキーワード initial
のみをサポートし、これは各遷移プロパティの初期値を示します。
transition-delay
: 0s
transition-duration
: 0s
transition-property
: initial
transition-timing-function
: ease
例
/*1 つの遷移*/
transition: width 2s ease-out;
/*2 つの遷移*/
transition: margin-right 4s, color 1s;
C# スクリプトでビジュアル要素の遷移プロパティを設定できます。
IStyle.transitionProperty
IStyle.transitionProperty
プロパティは、遷移が適用される USS プロパティを設定します。
transitionProperty
プロパティは StyleList<StylePropertyName>
型です。StylePropertyName
は、文字列から 構築 できる構造体です。StyleList
は、StylePropertyName
のリストから 構築 できる構造体です。
例
//rotate プロパティを含むリストを作成し、それを使って transitionProperty を設定します。
List<StylePropertyName> properties = new List<StylePropertyName>();
properties.Add(new StylePropertyName("rotate"));
//element という名前の VisualElement があるとすると...
element.style.transitionProperty = new StyleList<StylePropertyName>(properties);
暗示的に変換を行うことで,上記のコードを以下のように簡略化することができます。
//"element" という VisualElement があるとすると...
element.style.transitionProperty = new List<StylePropertyName>{ "rotate" };</StylePropertyName>
IStyle.transitionDuration
IStyle.transitionDuration
プロパティは、ビジュアル要素の遷移の持続時間を設定します。
transitionDuration
プロパティは、StyleList<TimeValue>
型です。TimeValue
は、数値と TimeUnit
enum から [構築] することができる構造体です。StyleList
は、TimeValue
のリストから 構築 できる構造体です。
例
//2 s と 500 ms の継続時間を含むリストを作成し、transitionDurationの設定に使用します。
List<TimeValue> durations = new List<TimeValue>();
durations.Add(new TimeValue(2f, TimeUnit.Second));
durations.Add(new TimeValue(500f, TimeUnit.Millisecond));
//"element" という名前の VisualElement があるとすると...
element.style.transitionDuration = new StyleList<TimeValue>(durations);</TimeValue></TimeValue></TimeValue>
暗示的に変換を行うことで,上記のコードを以下のように簡略化することができます。
//"element" という名前の VisualElement があるとると...
element.style.transitionDuration = new List<TimeValue> { 2, new (500, TimeUnit.Millisecond) };
IStyle.transitionTimingFunction
IStyle.transitionTimingFunction
プロパティは、ビジュアル要素の遷移のためのイージング関数を設定します。
transitionTimingFunction
プロパティは、 StyleList<EasingFunction>
型です。EasingFunction
は、EasingMode
enum から 構築 できる構造体です。
例
//リニアのイージング関数を含むリストを作成し、transitionTimingFunction を設定するために使用します。
List<EasingFunction> easingFunctions = new List<EasingFunction>();
easingFunctions.Add(new EasingFunction(EasingMode.Linear));
//"element" という VisualElement があるとすると...
element.style.transitionTimingFunction = new StyleList<EasingFunction>(easingFunctions);
暗示的に変換を行うことで,上記のコードを以下のように簡略化することができます。
// "element" という VisualElement があるとすると...
element.style.transitionTimingFunction = new List<EasingFunction> { EasingMode.Linear };
IStyle.transitionDelay
IStyle.transitionDelay
プロパティは、ビジュアル要素の遷移に対する遅延を設定します。
transitionDelay
プロパティは、StyleList<TimeValue>
型です。TimeValue
は、数値と TimeUnit
enum から 構築 できる構造体です。StyleList
は、TimeValue
のリストから 構築 できる構造体です。
例
//0.5sと200msの遅延を含むリストを作成し、transitionDelayの設定に使用します。
List<TimeValue>delays = new List<TimeValue>();
delays.Add(new TimeValue(0.5f, TimeUnit.Second));
delays.Add(new TimeValue(200f, TimeUnit.Millisecond));
//「element」という名前のVisualElementが与えられたら...
element.style.transitionDuration = new StyleList<TimeValue>(delays);</TimeValue></TimeValue></TimeValue>
暗示的に変換を行うことで,上記のコードを以下のように簡略化することができます。
//"element" という名前の VisualElement があるとすると...
element.style.transitionDelay = new List<TimeValue> { 0.5f, new(200, TimeUnit.Millisecond) };
ここでは、複数のプロパティに遷移を適用する例を紹介します。
例 1: この例では、scale
と transform-origin
プロパティに遷移を適用します。
scale
プロパティ上にあります。これには 4s
の継続時間、0s
の遅延、ease-in-sine
のイージング関数が含まれています。transform-origin
プロパティ上にあります。これには 3s
の継続時間、 600ms
の遅延、ease-out-elastic
のイージング関数が含まれています。.classA {
transition-property: scale, transform-origin;
transition-duration: 4s, 3s;
transition-delay: 0s, 600ms;
transition-timing-function: ease-in-sine, ease-out-elastic;
}
例 2: この例では、all
キーワードを持つ遷移も含めて、後のトランジションが前のトランジションをオーバーライドします。
linear
のイージング関数を適用します。translate
プロパティに適用されます。それは 1s
の継続時間、1s
の遅延、 ease-in
イージング関数を持つ遷移をオーバーライドします。他のすべてのプロパティにはまだ 500ms
の持続時間、0s
の遅延、linear
のイージング関数があります。.classB {
transition-property: all, translate;
transition-duration:500ms, 1s;
transition-delay:0s, 1s;
transition-timing-function: linear, ease-in;
}
例:
この例では、プロパティ値のリストの長さが異なる場合に何が起こるかを示しています。いずれかのプロパティの値リストが transition-property
のリストより短い場合、Unity はその値を繰り返して一致させます。同様に、いずれかのプロパティの値リストが transition-property
のものより長い場合、Unity はそれを切って短くします。
.classC {
transition-property: scale, rotate, translate;
transition-duration: 1s, 2s;
transition-delay: 1s, 2s, 3s, 4s, 5s, 6s, 7s;
}
上記の例で最終的に得られた結果は、以下の表のとおりです。
プロパティ | Duration | 最大遅延時間 | イージング機能 |
---|---|---|---|
scale |
1s |
1s |
ease |
rotate |
2s |
2s |
ease |
translate |
1s |
3s |
ease |
重要:transition-property
、transition-duration
、transition-delay
、transition-timing-function
はそれぞれ別の USS プロパティです。未定義のままにしておくと、別の USS ルールや UXML 要素のインラインなど、別の場所で定義される可能性があります。
Did you find this page useful? Please give it a rating:
Thanks for rating this page!
What kind of problem would you like to report?
Thanks for letting us know! This page has been marked for review based on your feedback.
If you have time, you can provide more information to help us fix the problem faster.
Provide more information
You've told us this page needs code samples. If you'd like to help us further, you could provide a code sample, or tell us about what kind of code sample you'd like to see:
You've told us there are code samples on this page which don't work. If you know how to fix it, or have something better we could use instead, please let us know:
You've told us there is information missing from this page. Please tell us more about what's missing:
You've told us there is incorrect information on this page. If you know what we should change to make it correct, please tell us:
You've told us this page has unclear or confusing information. Please tell us more about what you found unclear or confusing, or let us know how we could make it clearer:
You've told us there is a spelling or grammar error on this page. Please tell us what's wrong:
You've told us this page has a problem. Please tell us more about what's wrong:
Thank you for helping to make the Unity documentation better!
Your feedback has been submitted as a ticket for our documentation team to review.
We are not able to reply to every ticket submitted.