āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/imskyleen/animate-ui/icons/usage/timing ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
delayThis allows you to add a delay in milliseconds before starting the animation.
<ArrowRight delay={1000} />
// or with AnimateIcon
<AnimateIcon delay={1000}>
<ArrowRight />
</AnimateIcon>
loopThis allows the animation to be played in a loop.
<Callout type="info"> **Note:** We recommend using loop when the final state of the animation is identical to the `initial` state. </Callout><ArrowRight loop />
// or with AnimateIcon
<AnimateIcon loop>
<ArrowRight />
</AnimateIcon>
loopDelayThis allows you to add a delay in milliseconds between animations when the animation plays in a loop.
<ArrowRight loop loopDelay={1000} />
// or with AnimateIcon
<AnimateIcon loop loopDelay={1000}>
<ArrowRight />
</AnimateIcon>
<TypeTable type={{ delay: { description: 'The delay before animating the icon.', type: 'number', required: false, default: '0', }, loop: { description: 'Whether to loop the animation', type: 'boolean', required: false, default: 'false', }, loopDelay: { description: 'The delay before looping the animation', type: 'number', required: false, default: '0', }, }} />
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā