Animation

Atomic props for animating elements with CSS animations.

Atomic Props	CSS Properties
animateNone	animation: none;
animateSpin	animation: spin 1s linear infinite;
animatePing	animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
animatePulse	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
animateBounce	animation: bounce 1s infinite;

Spin

Result

Loading...

Live Editor

<Box animateSpin square20 rounded2XL bgGradientX={['red400', 'orange400']} />

<Box animateSpin square20 rounded2XL bgGradientX={['red400', 'orange400']} />

Ping

Result

Loading...

Live Editor

<Box flex square3 relative> <Box animatePing absolute inlineFlex w-100p h-100p roundedFull bgGreen400--O75></Box> <Box relative inlineFlex roundedFull square3 bgGreen500></Box> </Box>

<Box flex square3 relative>
  <Box animatePing absolute inlineFlex w-100p h-100p roundedFull bgGreen400--O75></Box>
  <Box relative inlineFlex roundedFull square3 bgGreen500></Box>
</Box>

Pulse

Result

Loading...

Live Editor

<Box border borderBlue300 shadow roundedMedium p4 w-100p mx-auto> <Box animatePulse flex gap4> <Box roundedFull bgBlue400 h12 w12></Box> <Box flex-1 gap4 py1> <Box h4 bgBlue400 rounded></Box> <Box gap2> <Box h4 bgBlue400 rounded></Box> <Box h4 bgBlue400 rounded></Box> </Box> </Box> </Box> </Box>

<Box border borderBlue300 shadow roundedMedium p4 w-100p mx-auto>
  <Box animatePulse flex gap4>
    <Box roundedFull bgBlue400 h12 w12></Box>
    <Box flex-1 gap4 py1>
      <Box h4 bgBlue400 rounded></Box>
      <Box gap2>
        <Box h4 bgBlue400 rounded></Box>
        <Box h4 bgBlue400 rounded></Box>
      </Box>
    </Box>
  </Box>
</Box>

Bounce

Result

Loading...

Live Editor

<Box py10 toCenter> <Box circle20 bgOrange400 animateBounce></Box> </Box>

<Box py10 toCenter>
  <Box circle20 bgOrange400 animateBounce></Box>
</Box>