Utility classes for defining a transition property for an animation on an element. This defines what properties will be affected by other transition properties (duration delay, and timing functions) when transitioning from one state to another such as hover, active, manual toggle in a script, etc. Properties that are not defined as a transition property will cut immediately from start, to end instantaneously.
Transition property utilities can be paired with duration, delay, and timing function utilities to define simple animations, More complex animations should use defined classes, or tweening. For a list of provided animations with Doddle USS, check out the Transition Library.
Classes for transition property are named using the format: [property]-[value].
Where value includes:
all- fortransition-property: alltranslate- fortransition-property: translateopacity- fortransition-property: opacityscale- fortransition-property: scalebg-colour- fortransition-property: background-colorb-colour- fortransition-property: border-colortext-colour- fortransition-property: colorall-colour- fortransition-property: background-color, border-color, color
| Class | Contents |
| |
| |
| |
| |
| |
| |
| |
| |
UXML
UXML
UXML
UXML
UXML
On this page