Animation Direction

Set animation direction

Syntax

visual="animation-direction:[value]"

Values

Value	CSS Output	Description
normal	animation-direction: normal	Normal direction
reverse	animation-direction: reverse	Reverse direction
alternate	animation-direction: alternate	Alternate direction
alternate-reverse	animation-direction: alternate-reverse	Alternate reverse

Examples

<div visual="animate:bounce animation-direction:alternate">Alternating</div>

Preview

Animation Direction

visual="animation-direction:alternate" - Control playback direction

normal

reverse

alternate

View Code

<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-direction:normal">normal</div>
  <div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-direction:reverse">reverse</div>
  <div space="p:small" visual="bg:primary text:white rounded:small animate:spin animation-direction:alternate">alternate</div>
</div>