Animate trigger

Learn how to animate CSS properties automatically on page load

An animate trigger plays the animation automatically on page load just like the standard CSS animation.

To animate the properties, use the animate keyword. Animation that starts automatically.

These examples show the usage of the animate trigger in the various timeline types together with the combination with the different triggers.

Discrete timeline is the basic timeline that animate the properties when the animate trigger is executed on the element.

Sequenced timeline animates the CSS properties in the sequence of steps using the animate trigger.

Offset-based timeline combine the CSS-offsets with the sequence of steps to animate the properties, executed by an animate trigger.

The animate trigger can be combined with any other available triggers.

The animate trigger does not accept any parameters.