You can add multiple transitions to an element and set them to different timing and easing. For example, you can transition the background color of and element and then, transition the height of an element.
To add multiple transitions:
Click the Add transition button below the current transition properties
A new row of transition fields will appear
Add the new transition properties.
Transition properties
Set the element to transition gradually between from one CSS property to another CSS property.
Transition type
Set the CSS property to transition. You can apply a transition to all properties or just one property from the list.
Options:
All - Transition all of the element's properties
None - Don't apply a transition
Background color - Transition the background color property
Color - Transition the color property
Height - Transition the height property
Width - Transition the width property
Custom - Specify a property to transition
Duration (ms)
Set the time transition will last.
Expected value:
Number. This will be interpreted as milliseconds
Accepted units:
Blank - The value will be converted to milliseconds
ms - The value will be applied in milliseconds
s - the value will be applied in seconds
Delay (ms)
Set a time delay before the transition will start.
Expected value:
Number. This will be interpreted as milliseconds
Accepted units:
Blank - The value will be converted to milliseconds
ms - The value will be applied in milliseconds
s - the value will be applied in seconds
Easing
Set the transition timing function. This sets an acceleration curve, so that the speed of the transition can vary over its duration.
Options
Ease - transition effect with a slow start, then fast, then end slowly
Linear - Don't apply any easing
Ease-in - transition effect with a slow start
Ease out - transition effect with a slow end
Ease in-out - transition effect with a slow start and end
You can add multiple transitions to an element and set them to different timing and easing. For example, you can transition the background color of and element and then, transition the height of an element.
To add multiple transitions:
Click the Add transition button below the current transition properties
A new row of transition fields will appear
Add the new transition properties.
Did not find what you were looking for?
If this content did not answer your questions, try searching or contacting our support team for further assistance.
Site Studio