过渡

过渡

使用transition 属性来控制元素的过渡。

// hardcoded value
<Box bg="red.400" _hover={{ bg: "red.500" }} transition="background 0.2s ease-in-out">
  Hover me
</Box>

// shortcut value
<Box bg="red.400" _hover={{ bg: "red.500" }} transition="backgrounds">
  Hover me
</Box>

属性	CSS 属性	令牌类别
transition	transition	-

过渡时间函数

使用 transitionTimingFunction 属性来控制过渡的时间函数。

<Box
  bg="red.400"
  _hover={{ bg: "red.500" }}
  transition="backgrounds"
  transitionTimingFunction="ease-in-out"
>
  Hover me
</Box>

属性	CSS 属性	令牌类别
transitionTimingFunction	transition-timing-function	缓动函数

过渡持续时间

使用 transitionDuration 属性来控制过渡的持续时间。

<Box
  bg="red.400"
  _hover={{ bg: "red.500" }}
  transition="backgrounds"
  transitionDuration="fast"
>
  Hover me
</Box>

属性	CSS 属性	令牌类别
transitionDuration	transition-duration	持续时间

过渡延迟

使用 transitionDelay 属性来控制过渡的延迟。

<Box
  bg="red.400"
  _hover={{ bg: "red.500" }}
  transition="backgrounds"
  transitionDelay="fast"
>
  Hover me
</Box>

属性	CSS 属性	令牌类别
transitionDelay	transition-delay	持续时间

动画

使用 animation 属性来控制元素的动画。

<Box animation="bounce" />

属性	CSS 属性	令牌类别
animation	animation-name	动画

动画名称

使用 animationName 属性来控制动画的名称。组合多个动画名称以创建复杂的动画。

<Box animationName="bounce, fade-in" animationDuration="fast" />

属性	CSS 属性	令牌类别
animationName	animation-name	动画

动画时间函数

使用 animationTimingFunction 属性来控制动画的时间函数。

<Box animation="bounce" animationTimingFunction="ease-in-out" />

属性	CSS 属性	令牌类别
animationTimingFunction	animation-timing-function	缓动函数

动画持续时间

使用 animationDuration 属性来控制动画的持续时间。

<Box animation="bounce" animationDuration="fast" />

属性	CSS 属性	令牌类别
animationDuration	animation-duration	持续时间

动画延迟

使用 animationDelay 属性来控制动画的延迟。

<Box animation="bounce" animationDelay="fast" />

属性	CSS 属性	令牌类别
animationDelay	animation-delay	持续时间