You may have seen that we recently added the transform properties and that these are more optimal for animations. This is put to the test with our new feature: USS Transitions!
These transitions are optimizing the creation of rich, interactive UIs based on UI Toolkit. The USS transitions, based on the CSS equivalent, offer a simple way to do some basic animations by offering a transition whenever the style changes. When set up, these are triggered regardless of the source of the change, whether it is a class added, a pseudo style change was applied or event the inline change was made in C#.
Here is a quick tutorial going over all the step to apply a transition in the UI builder.
This is a large feature, because it touches every USS property. We may have worked really hard to provide as much functionality as possible from day one, with as few exceptions as possible.
We have three different categories of property:
- Fully animatable,
- discrete animation only, and
- not animatable
The fully animatable implies that the value will transition gradually from the previous value to the final one, at a speed that follows the easing function and transition duration. The discrete animation allows for changing a parameter, but in a single step from the initial value to the end value. This is usually a property that does not have an “in between” state, or the one that would be really difficult to animate, like the text alignment. Finally, not animatable do not support the transition framework at all. We think most frequent use cases are covered by the current implementation.
So here is what we are supporting:
drummroll
Fully animatable:
bottom; left; right; top;
color; background-color;
opacity;
flex; flex-basis; flex-grow; flex-shrink;
rotate; scale; translate; transform-origin;
height; width; max-height; min-height; max-width; min-width;
border-width; border-top-width; border-right-width; border-left-width; border-bottom-width;
border-radius; border-top-right-radius; border-top-left-radius; border-bottom-left-radius; border-bottom; -right-radius;
border-color; border-top-color; border-right-color; border-left-color; border-bottom-color;
margin; margin-bottom; margin-left; margin-right; margin-top;
padding; padding-bottom; padding-left; padding-right; padding-top;
letter-spacing; word-spacing; -unity-paragraph-spacing;
-unity-background-image-tint-color;
-unity-text-outline; -unity-text-outline-color; -unity-text-outline-width;
text-shadow;
-unity-slice-bottom; -unity-slice-left; -unity-slice-right; -unity-slice-top;
Discrete animation:
visibility;
background-image;
align-content align-items;
display;
flex-direction flex-wrap;
font-size;
justify-content;
overflow;
position;
text-overflow;
-unity-font-definition;
-unity-font;
-unity-background-scale-mode;
-unity-font-style;
-unity-overflow-clip-box;
-unity-text-align;
-unity-text-overflow-position;
white-space;
not animatable:
cursor;
transition; transition-delay; transition-duration; transition-property; transition-timing-function;
take a deep breath
In addition to that, we support many easing functions, variable transition durations and a configurable transition delay. This allows for modifying the look and feel of the transition as well as adjusting the sequence in which the transitions occur. Using the easing functions allows the discrete animation to be triggered at the beginning, the end or even in the middle of the transition.
There are so many new details with these features that the documentation needs to catch up. We still want to allow those who are familiar with the CSS equivalent to start using this new tool as soon as possible!
Under the hood is an event system that enables a lot of possibilities, that would be detailed in a future post.
Finally, we are still improving the performance and reducing the cost of transitioning for most frequently used properties.in futures version of Unity.
Thank you!
), but I believe the custom ones could make a big difference. For example, using an AnimationCurve as a timing function would give more unique possibilities. Don’t get me wrong, 23 EasingMode is not less; but I believe the transitions/animations needs more freedom on timing to make them more unique/tasty. 
this should work. I tested it myself a few times, and we do handle 0px as 0% and vice versa for both the initial or final style. If you are able to reproduce this, please report a bug in unity with a repro project because there is something I seem to ignore.