Animation
Yamada UI provides features to easily achieve the animation you want.
Usage
<Box
w="fit-content"
bg="bg.contrast"
color="fg.contrast"
p="md"
animationDirection="alternate"
animationDuration="1s"
animationIterationCount="infinite"
animationTimingFunction="linear"
_keyframes={{
from: { translate: "0 0" },
to: { translate: "100% 0" },
}}
>
Box
</Box>
You can also use theme keyframes to apply common keyframes throughout your application. Using animationName or _keyframes is recommended.
<Box
w="fit-content"
bg="bg.contrast"
color="fg.contrast"
p="md"
animationName="fade-in"
animationDirection="alternate"
animationDuration="1s"
animationIterationCount="infinite"
animationTimingFunction="linear"
>
Box
</Box>
Use Theme Tokens
To use theme animations, set the animation property.
<Box
w="fit-content"
bg="bg.contrast"
color="fg.contrast"
p="md"
animation="fade-in"
>
Box
</Box>
Components
Yamada UI provides components that make animations easier to implement.
Motion
A convenient component that extends the Yamada UI Style Props to Motion.
Airy
A component that provides an animation that smoothly switches between two elements.
Collapse
A component that expands or collapses an element to display it.
FadeScale
A component that gradually expands or shrinks an element to display or hide it.
Fade
A component that gradually displays or hides an element.
Flip
A component that provides an animation that flips between two elements.
Ripple
A component that provides a ripple effect to an element to recognize if the user has clicked it.
Rotate
A component that provides an animation that rotates between two elements.
Skeleton
A component that functions as a placeholder until the content is loaded.
SlideFade
A component that gradually displays or hides an element from a specified position.
Slide
A component that displays or hides an element from the corner of the page.
Hooks
Yamada UI provides convenient custom hooks for animations.