Timeout trigger
Animate CSS properties after a specified time delay
Overview
An timeout trigger executes the animation when the element becomes visible in the viewport. The animation then starts to play in the normal direction from start to end. When the element is out of the viewport, the animation switch to backward direction and will play from the current state back to the start.
Syntax
To activate the timeout trigger, use the timeout keyword. The CSS property will be animated once the time reaches the delay specified by the start and end timeout offset parameters defined by the seconds s or milliseconds ms.
Examples
These examples show the usage of the timeout trigger in the various timeline types together with the combination with the different triggers.
Discrete timeline
Discrete timeline is the basic timeline, that animate the properties when the timeout trigger is executed on the element.
Sequenced timeline
Sequenced timeline animates the CSS properties in the sequence of steps using the timeout trigger.
Offset-based timeline
Offset-based timeline combine the CSS-offsets with the sequence of steps to animate the properties, executed by an timeout trigger.
Combination
The timeout trigger can be combined with any other available triggers.
Parameters
Trigger can be customized with the parameters that are defined within its parentheses ().
Time offset
The start and end offsets limits when the trigger trigger should start or finish.
start offset
By default, the start offset is set to 0ms, meaning the trigger starts immediately. Adjusting this value allows you to modify when the animation starts.
| Name | Value | Default | Example | Shorthand |
|---|---|---|---|---|
start |
{number}{ms| s} |
0ms |
timeout(start: 1s) |
timeout(1s) |
<!-- Shorthand -->
<!-- Start the animation after 1500ms -->
<!-- Shorthand -->
end offset
By setting the end timeout offset, you can control how long the animation remains active. For instance, if you set end: 5s, the animation will play for 5 seconds, then switch direction and play backward to its initial state. Regardless of how the animation’s duration is set, the end offset will stop the animation from continuing.
| Name | Value | Default | Example | Shorthand |
|---|---|---|---|---|
end |
{number}{ms| s} |
0ms |
timeout(end: 2s) |
timeout(2s) |
<!-- Revert the animation after 1500ms -->
<!-- No shorthand -->
start + end offsets
You can also combine the start and end offsets to fine-tune when the animation should start and finish.
<!-- Shorthand -->
<!-- Start the animation after 1500ms, then wait for 5000ms and revert it back -->
<!-- Shorthand -->