Animation Builtin

Apply built-in animations

Syntax

visual="animate:[value]"

Values

Value	CSS Output	Description
none	animation: none	No animation
spin	animation: spin 1s linear infinite	Spinning
ping	animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite	Ping effect
pulse	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite	Pulsing
bounce	animation: bounce 1s infinite	Bouncing

Examples

<div visual="animate:spin">Loading...</div>

Preview

Built-in Animations

visual="animate:spin" - Ready-to-use animations

spin

pulse

bounce

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">spin</div>
  <div space="p:small" visual="bg:primary text:white rounded:small animate:pulse">pulse</div>
  <div space="p:small" visual="bg:primary text:white rounded:small animate:bounce">bounce</div>
</div>

Arbitrary Values

Supports custom values using bracket syntax:

<div visual="animation:[custom-value]">Custom</div>