Loop Count
Control how many times animations repeat
Basic Usage
Control how many times animations repeat using the motion-loop-{value}
utility:
Loop twice
Default Value
The default loop count for all loop animations is infinite if no loop count modifier is specified.
Available Values
These are the theme default values. You can customize the theme to add your own values to the motionLoopCount
property or use arbitrary values.
Class | Value |
---|---|
motion-loop-infinite | infinite |
motion-loop-once | 1 |
motion-loop-twice | 2 |
motion-loop-[1.5] | Arbitrary value |
Property-Specific Loop Count
Apply loop count to specific properties using a slash /
:
Rotate twice, translate infinitely
Examples
Single Loop
Loop once
Multiple Properties
Different loop counts per property
Infinite Loop
Loop forever