Set up animation (transition timing)
When you set both a default style and a conditional style on an element, the difference between them plays back as an animation. You can fine-tune how the animation moves using three settings: "Easing," "Duration," and "Delay."
(1) Easing: The acceleration and deceleration of the transition
(2) Duration: How long the transition takes
(3) Delay: The time gap between when the condition is triggered and when the transition starts
Remove an animation
To remove an animation, delete the conditional style.
For details, see "Remove a conditional style."
Use templates to set up conditional styles and animations
Animation templates are available for some conditional style triggers (specifically, [Hover] and [On appear]).
When you select a template, each setting in the conditional style panel is filled in automatically. Fields that have been filled in will appear in a different color, so you can easily see which values were set.
Tip: Setting animation on the default style
If you set animation values on the default style under the [Transform] tab, those settings will apply to the motion that plays "when the conditional style trigger is released and the element returns to its default style."
(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, so you can specify when the animation moves quickly or slowly.
How to set it
Pick the motion that's closest to what you want from the 11 preset curves at the top of the panel
Drag the handles extending from each end of the curve to customize it and create your own easing
Enter values directly into the coordinate fields below the graph
Tip: Duplicating a custom curve
You can duplicate a custom curve by copying the string below it (for example, cubic-bezier(0.4,0.4,0.1)) and pasting it into the transition curve field of another box.
(2) Duration
This setting specifies how many seconds the animation takes. Higher values create slower motion, while lower values make the change happen quickly. You can also enter decimal values.
(3) Delay
This setting specifies the time gap between when the condition set in the conditional style is triggered and when the transition begins. Decimal values can also be entered.
Example uses:
Set different delay values on multiple images so they appear one after another with a few seconds between each.
Put each letter of a word in its own box, and gradually increase the delay value for the second letter, third letter, and so on, to animate the letters one by one in sequence.
animation rotate animation motion remove animation stop animation fade in sway shake appear instant while appear