전환(Transition)·애니메이션 스타일 프로퍼티

요소의 전환(transition)과 애니메이션을 제어하는 JSX 스타일 프로퍼티에 대해 알아봐요. 토큰 값을 활용해 지속시간이나 타이밍 함수를 일관되게 적용할 수 있어요.

출처: 문서

본문

Transition

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>

Prop	CSS Property	Token Category
`transition`	`transition`	-

Transition Timing Function

transitionTimingFunction 프로퍼티로 전환의 타이밍 함수를 제어해요.

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

Prop	CSS Property	Token Category
`transitionTimingFunction`	`transition-timing-function`	`easings`

Transition Duration

transitionDuration 프로퍼티로 전환의 지속시간을 제어해요.

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

Prop	CSS Property	Token Category
`transitionDuration`	`transition-duration`	`durations`

Transition Delay

transitionDelay 프로퍼티로 전환의 지연 시간을 제어해요.

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

Prop	CSS Property	Token Category
`transitionDelay`	`transition-delay`	`durations`

Animation

animation 프로퍼티로 요소의 애니메이션을 제어해요.

<Box animation="bounce" />

Prop	CSS Property	Token Category
`animation`	`animation-name`	`animations`

Animation Name

animationName 프로퍼티로 애니메이션의 이름을 제어해요. 여러 애니메이션 이름을 조합하면 복잡한 애니메이션을 만들 수 있어요.

:::info

animation 프로퍼티의 값은 전역 keyframe 애니메이션을 가리켜요. 애니메이션을 정의할 때는 theme.keyframes 객체를 사용해요.

:::

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

Prop	CSS Property	Token Category
`animationName`	`animation-name`	`animations`

Animation Timing Function

animationTimingFunction 프로퍼티로 애니메이션의 타이밍 함수를 제어해요.

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

Prop	CSS Property	Token Category
`animationTimingFunction`	`animation-timing-function`	`easings`

Animation Duration

animationDuration 프로퍼티로 애니메이션의 지속시간을 제어해요.

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

Prop	CSS Property	Token Category
`animationDuration`	`animation-duration`	`durations`

Animation Delay

animationDelay 프로퍼티로 애니메이션의 지연 시간을 제어해요.

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

Prop	CSS Property	Token Category
`animationDelay`	`animation-delay`	`durations`

전환(Transition)·애니메이션 스타일 프로퍼티