转换

转换

¥Transition

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

¥Use the transition prop to control the transition of an element.

// 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	*

过渡计时函数

¥Transition Timing Function

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

¥Use the transitionTimingFunction prop to control the timing function of a transition.

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

属性	CSS 属性	标记类别
transitionTimingFunction	transition-timing-function	easings

过渡持续时间

¥Transition Duration

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

¥Use the transitionDuration prop to control the duration of a transition.

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

属性	CSS 属性	标记类别
transitionDuration	transition-duration	durations

过渡延迟

¥Transition Delay

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

¥Use the transitionDelay prop to control the delay of a transition.

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

属性	CSS 属性	标记类别
transitionDelay	transition-delay	durations

动画

¥Animation

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

¥Use the animation prop to control the animation of an element.

<Box animation="bounce" />

属性	CSS 属性	标记类别
animation	animation-name	animations

动画名称

¥Animation Name

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

¥Use the animationName prop to control the name of an animation. Compose multiple animation names to create complex animations.

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

属性	CSS 属性	标记类别
animationName	animation-name	animations

动画计时函数

¥Animation Timing Function

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

¥Use the animationTimingFunction prop to control the timing function of an animation.

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

属性	CSS 属性	标记类别
animationTimingFunction	animation-timing-function	easings

动画时长

¥Animation Duration

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

¥Use the animationDuration prop to control the duration of an animation.

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

属性	CSS 属性	标记类别
animationDuration	animation-duration	durations

动画延迟

¥Animation Delay

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

¥Use the animationDelay prop to control the delay of an animation.

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

属性	CSS 属性	标记类别
animationDelay	animation-delay	durations