Set up an animation (transition duration)
When you apply both a default style and a conditional style to an element, the difference between them plays as an animation. You can control how the animation behaves using three settings: Easing, Duration, and Delay.
(1) Easing: Controls the acceleration and deceleration of the transition
(2) Duration: Sets how long the transition takes
(3) Delay: Sets the wait time between when the condition is triggered and when the transition starts
Remove an animation
To remove an animation, delete the conditional style.
For more details, see "Delete a conditional style."
Use a template to set up conditional styles and animations
Some conditional style triggers — specifically [Hover] and [Appear] — come with animation templates.
When you select a template, the values for each setting are automatically filled in on the conditional style settings screen. Fields that have values will change color so you can easily identify them.
Tips: When you set animation on the default style
If you configure animation settings on the default style in the [Transform] tab, those settings apply to the transition back to the default style — in other words, when the conditional style's trigger condition is no longer met.
(1) Easing
Easing is a curve that represents the acceleration and deceleration of an animation. The horizontal axis represents time and the vertical axis represents the amount of change, letting you control when the animation speeds up or slows down.
How to set it up
Choose from the 11 preset curves at the top of the panel to find the motion that best matches your vision
Drag the handles extending from each end of the curve to customize the acceleration and deceleration
Enter coordinate values directly in the fields below the graph
Tips: Duplicating a custom curve
You can copy the text string below the curve (e.g., cubic-bezier(0.4,0.4,0.1)) and paste it into the transition curve field of another box to duplicate it.
(2) Duration
This setting specifies how many seconds the animation takes to complete. A larger value creates a slower motion, while a smaller value makes the change happen quickly. You can also enter decimal values.
(3) Delay
This setting specifies the wait time between when the conditional style trigger occurs and when the transition actually starts. You can also enter decimal values.
Examples:
Set different delay values on multiple images so they appear one after another, staggered by a few seconds.
Place each letter of a word in a separate box and gradually increase the delay value for the 2nd letter, 3rd letter, and so on — creating a letter-by-letter animation effect.
animation motion appear