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. When you do not specify the start delay, the trigger is fired immediately.

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

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)
<!-- Start the animation after 2s -->

<!-- Shorthand -->

<!-- Start the animation after 1500ms -->

<!-- Shorthand -->
end

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.

Because the start timeout is not specified in this example, the animation is triggered immediately, but then reverted after the defined end timeout.

—

Note: The end offset is evaluated relative to the page load. So if you define both start: 2s and end: 2s, the animation won’t play at all. This happens because the animation is triggered at 2 seconds, but the end offset also occurs at the same time, causing it to immediately reverse.

Name Value Default Example Shorthand
end {number}{ms| s} 0ms timeout(end: 2s) -
<!-- Revert the animation after 2s -->

<!-- Revert the animation after 1500ms -->

<!-- No shorthand -->
lasts

The lasts parameter specifies how long the animation should last before it reverts back to its initial state. Unlike the end offset, which is based on the page load, lasts is relative to the start, meaning it begins counting only after the animation is triggered.

Name Value Default Example Shorthand
end {number}{ms| s} 0ms timeout(lasts: 2s) -
<!-- Animation lasts 2s then it's reverted back -->

<!-- Animation lasts 1500ms then it's reverted back -->

<!-- No shorthand -->
start + end

You can also combine the start and end offsets to fine-tune when the animation should start and finish.

<!-- Start the animation after 2s, the wait 4s and revert it back -->

<!-- Start the animation after 1500ms, then wait for 5000ms and revert it back -->