USS transitions are similar to CSS transitions. A USS transition changes property values over a given duration. You can use a USS transition to create an animation that changes the appearance of a visual elementA node of a visual tree that instantiates or derives from the C# VisualElement
class. You can style the look, define the behaviour, and display it on screen as part of the UI. More info
See in Glossary. For example, you can use a UI(User Interface) Allows a user to interact with your application. Unity currently supports three UI systems. More info
See in Glossary transition to make UI elements that change size or color when a user hovers their cursor over them.
You can use the controls in the UI Builder, a USS file, or a C# script to set the transition properties for a visual element.
The following table lists the transition properties and their corresponding C# methods:
Property | C# method | Description |
---|---|---|
transition-property |
IStyle.transitionProperty |
Which USS properties the transition applies to. |
transition-duration |
IStyle.transitionDuration |
How long the transition takes to complete. |
transition-timing-function |
IStyle.transitionTimingFunction |
How the property moves between values over time. |
transition-delay |
IStyle.transitionDelay |
When the transition starts. |
transition |
Shorthand for transition-property , transition-duration , transition-timing-function , and transition-delay . |
A transition triggers if you set a transition duration on the style and the style value changes. You can use pseudo-classes, C# methods, or events to trigger the transition.
Note: A transition animation on a frame is triggered when the property’s current state is different from the previous state. The first frame in a sceneA Scene contains the environments and menus of your game. Think of each unique Scene file as a unique level. In each Scene, you place your environments, obstacles, and decorations, essentially designing and building your game in pieces. More info
See in Glossary has no previous state. You must start a transition animation after the first frame.
The following transition example changes the color and rotation of the label when you hover over it. The transition has a duration of 2 seconds.
To implement this example, do the following:
The example USS looks like this:
/* Set the transition properties, duration, and start style values. */ .labelClass { transition-property: color, rotate; transition-duration: 2s; color: black; } /* The Label:hover triggers the transition. Set the end values for the trigger. */ .labelClass:hover { rotate: 10deg; color: red; }
Note: The example sets the transition on the element rather than the :hover
. If you set the transition on the :hover
, the transition doesn’t work if the cursor leaves the element.
To learn how to trigger a transition with C# events, refer to Create a simple transition with UI Builder and C# scripts.
For properties that you set with a value and unit, make sure the units match. Pay special attention to transitions to or from default values. For example, the default value of the translate
attribute is 0px
. If you try to transition from this value to a percentage value, the transition doesn’t work.
The following transition example offsets the visual element to the left by 50px
over 2 seconds. The default value of the left
property is auto
. You must explicitly set the unit to 0px
for the transition to work.
The example USS looks like this:
.boxClass:hover { left: 50px; } .boxClass { transition-property: left; transition-duration: 2s; transition-timing-function: ease-in-out-sine; left: 0px; }
For visual elements in a hierarchy, USS transitions behave the same as CSS transitions. If you set transitions for an inherited property, such as color
, transitions applied to the parent elements cascade to the child elements. To find out which property is inherited, refer to USS property reference.
When an incomplete transition is interruptedSame
, USS transitions behave the same as CSS transitions. The reverse transition might be faster. For more information, refer to Faster reversing of interrupted transitions
Transition events are generated by transitions. You can use them to detect when a transition starts and ends. For an example, refer to Create a transition event.
The Usage Hints offers a set of properties for optimizations. You can use it to reduce draw calls and geometry regeneration.
Note: Set the usage hints at edit time or before you add the element to a panel. When the transition starts, the system might automatically add missing relevant usage hints to avoid regenerating geometry in every frame. However, this causes a one-frame performance penalty because the rendering data for the VisualElement and its descendants is regenerated.
You can use the controls in the Transition Animations section of the InspectorA Unity window that displays information about the currently selected GameObject, asset or project settings, allowing you to inspect and edit the values. More info
See in Glossary in the UI Builder to set transition rules for a visual element. You can set multiple transitions on a visual element. To add another transition, select Add Transition. To remove a transition, select the Remove (−) button.
The transition property defines which USS properties the transition applies to.
The transition property supports the following keywords:
all
: Applies transitions to all properties and overrides any preceding transitions. This is the default value.initial
: Applies transitions to all properties.none
: Ignores transitions for all properties.ignored
: Ignores transitions for the specified duration, delay, and easing function.You can apply transitions to most USS properties. However, the animatability for certain properties is different. The animatability of USS properties falls into the following categories:
To find out the animatability of each property, see USS property reference.
Note: It’s recommended that you use transitions with the USS transform properties. Although you can use transitions on other USS properties, it might result in animations with low frame rates because value changes on these properties might cause layout recalculations. Layout recalculations in each frame can slow down the frame rate of your transition animation. All color properties, such as color
, background-color
, tint, and opacity
, also have a fast pass that prevents the regeneration of the geometry.
You can supply a single USS property, a keyword, or a comma-separated list of them to transition-property
.
transition-property: scale; transition-property: translate, all, rotate; transition-property: initial; transition-property: none;
The IStyle.transitionProperty
property is of type StyleList<StylePropertyName>
. StylePropertyName
is a struct that you can construct from a string. StyleList
is a struct you can construct from a list of StylePropertyName
.
//Create a list that contains the rotate property, and use it to set transitionProperty. List<StylePropertyName> properties = new List<StylePropertyName>(); properties.Add(new StylePropertyName("rotate")); //Given a VisualElement named "element"... element.style.transitionProperty = new StyleList<StylePropertyName>(properties);
You can use implicit conversions to simplify the above code as follows:
//Given a VisualElement named "element"... element.style.transitionProperty = new List<StylePropertyName> { "rotate" };
The transition duration sets how long the transition takes to complete.
The transition duration supports the following keywords:
initial
: Sets the duration to 0s
. This is the default value.You can supply a number with a unit, a keyword, or a comma-separated list of numbers and units to transition-duration
.
transition-duration: 2s; transition-duration: 800ms; transition-duration: 3s, 1500ms, 1.75s; transition-duration: initial;
If you supply multiple values, each value applies to the corresponding property specified in transition-property
. In the following example, the original duration for scale is 1s
, but all
overrides it to 2s
.
transition-property: scale, all, rotate; transition-duration: 1s, 2s, 3s;
The IStyle.transitionDuration
property is of type StyleList<TimeValue>
. TimeValue
is a struct that you can construct from a number and a TimeUnit
enum. StyleList
is a struct you can construct from a list of TimeValue
.
//Create a list that contains durations 2s and 500ms and use it to set transitionDuration. List<TimeValue> durations = new List<TimeValue>(); durations.Add(new TimeValue(2f, TimeUnit.Second)); durations.Add(new TimeValue(500f, TimeUnit.Millisecond)); //Given a VisualElement named "element"... element.style.transitionDuration = new StyleList<TimeValue>(durations);
You can use implicit conversions to simplify the above code as follows:
//Given a VisualElement named "element"... element.style.transitionDuration = new List<TimeValue> { 2, new (500, TimeUnit.Millisecond) };
The transition timing function sets how the property moves between values over time.
The transition timing function supports the following keywords. The default value is initial
, which sets the easing function to ease
.
initial
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
For detailed information about each function, refer to MDN’s documentation for the transition-timing-function
CSS attribute or easings.net.
You can supply an easing function, a keyword, or a comma-separated list of easing functions to transition-timing-function
.
transition-timing-function: linear; transition-timing-function: ease-in, ease-out-circ, ease-in-out-cubic; transition-timing-function: initial;
The IStyle.transitionTimingFunction
property is of type StyleList<EasingFunction>
. EasingFunction
is a struct that you can construct from an EasingMode
enum.
//Create a list that contains the Linear easing function, and use it to set transitionTimingFunction. List<EasingFunction> easingFunctions = new List<EasingFunction>(); easingFunctions.Add(new EasingFunction(EasingMode.Linear)); //Given a VisualElement named "element"... element.style.transitionTimingFunction = new StyleList<EasingFunction>(easingFunctions);
You can use implicit conversions to simplify the above code as follows:
//Given a VisualElement named "element"... element.style.transitionTimingFunction = new List<EasingFunction> { EasingMode.Linear };
The transition delay sets when the transition starts.
The transition delay supports the following keywords:
initial
: Sets the delay to 0s
. This is the default value.You can supply a number with a unit, a keyword, or a comma-separated list of numbers and units to transition-delay
.
transition-delay: 0s; transition-delay: 300ms; transition-delay: 2s, 650ms, 2.75s; transition-delay: initial;
The IStyle.transitionDelay
property is of type StyleList<TimeValue>
. TimeValue
is a struct that you can construct from a number and a TimeUnit
enum. StyleList
is a struct you can construct from a list of TimeValue
.
//Create a list that contains delays 0.5s and 200ms, and use it to set transitionDelay. List<TimeValue> delays = new List<TimeValue>(); delays.Add(new TimeValue(0.5f, TimeUnit.Second)); delays.Add(new TimeValue(200f, TimeUnit.Millisecond)); //Given a VisualElement named "element"... element.style.transitionDelay = new StyleList<TimeValue>(delays);
You can use implicit conversions to simplify the above code as follows:
//Given a VisualElement named "element"... element.style.transitionDelay = new List<TimeValue> { 0.5f, new(200, TimeUnit.Millisecond) };
transition
You can supply one transition, a keyword, or a comma-separated list of transitions to transition
. You separate properties within a transition by a space in the following order:
transition-property
transition-delay
transition-duration
transition-timing-function
transition
only supports the keyword initial
, which represents the initial value of each transition property:
transition-delay
: 0s
transition-duration
: 0s
transition-property
: all
transition-timing-function
: ease
/*One transition*/ transition: width 2s ease-out; /*Two transitions*/ transition: margin-right 4s, color 1s;
This section includes examples that apply transitions on multiple properties.
This example applies transitions on the scale
and transform-origin
properties:
scale
property. It has a duration of 4s
, a delay of 0s
, and the ease-in-sine
easing function.transform-origin
property. It has a duration of 3s
, a delay of 600ms
, and the ease-out-elastic
easing function..classA { transition-property: scale, transform-origin; transition-duration: 4s, 3s; transition-delay: 0s, 600ms; transition-timing-function: ease-in-sine, ease-out-elastic; }
In this example, the later transitions override earlier transitions, including transitions with the all
keyword:
linear
easing function.translate
property. It overrides the transition with a duration of 1s
, a delay of 1s
, and the ease-in
easing function. All other properties still have a duration of 500ms
, a delay of 0s
, and the linear
easing function..classB { transition-property: all, translate; transition-duration: 500ms, 1s; transition-delay: 0s, 1s; transition-timing-function: linear, ease-in; }
This example shows what happens when property value lists are of different lengths. If any property’s list of values is shorter than that for transition-property
, Unity repeats its values to make them match. Similarly, if any property’s value list is longer than transition-property
, Unity truncates it.
.classC { transition-property: scale, rotate, translate; transition-duration: 1s, 2s; transition-delay: 1s, 2s, 3s, 4s, 5s, 6s, 7s; }
The following table shows the final results for the example above:
Property | Duration | Delay | Easing function |
---|---|---|---|
scale |
1s |
1s |
ease |
rotate |
2s |
2s |
ease |
translate |
1s |
3s |
ease |
Important: transition-property
, transition-duration
, transition-delay
, and transition-timing-function
are separate USS properties. If you leave any of them undefined, it’s possible that they are defined elsewhere, such as in another USS rule or inline on the UXML element.
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.
When you visit any website, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalized web experience. Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and change our default settings. However, blocking some types of cookies may impact your experience of the site and the services we are able to offer.
More information
These cookies enable the website to provide enhanced functionality and personalisation. They may be set by us or by third party providers whose services we have added to our pages. If you do not allow these cookies then some or all of these services may not function properly.
These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us to know which pages are the most and least popular and see how visitors move around the site. All information these cookies collect is aggregated and therefore anonymous. If you do not allow these cookies we will not know when you have visited our site, and will not be able to monitor its performance.
These cookies may be set through our site by our advertising partners. They may be used by those companies to build a profile of your interests and show you relevant adverts on other sites. They do not store directly personal information, but are based on uniquely identifying your browser and internet device. If you do not allow these cookies, you will experience less targeted advertising. Some 3rd party video providers do not allow video views without targeting cookies. If you are experiencing difficulty viewing a video, you will need to set your cookie preferences for targeting to yes if you wish to view videos from these providers. Unity does not control this.
These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms. You can set your browser to block or alert you about these cookies, but some parts of the site will not then work. These cookies do not store any personally identifiable information.