트랜지션

트랜지션은 속성, 시간, 타이밍 함수를 한 클래스에 조합합니다.

형식

t{속성}{시간}{타이밍}

기본 트랜지션

클래스	CSS
`tall200msease`	transition: all 200ms ease
`tall300ms`	transition: all 300ms
`topacity500ms`	transition: opacity 500ms
`tnone`	transition: none

타이밍 함수

키워드	CSS
`ease`	ease
`easein`	ease-in
`easeout`	ease-out
`easeinout`	ease-in-out
`linear`	linear

cubic-bezier

cb 키워드 뒤에 4개 값을 하이픈으로 연결합니다:

클래스	CSS
`tall300mscb0-50-50-100`	transition: all 300ms cubic-bezier(0, 0.5, 0.5, 1)

Transition Property

클래스	CSS
`tpall`	transition-property: all
`tpnone`	transition-property: none

Transition Timing Function

클래스	CSS
`tfe`	transition-timing-function: ease
`tfei`	transition-timing-function: ease-in
`tfeo`	transition-timing-function: ease-out
`tfeio`	transition-timing-function: ease-in-out
`tfl`	transition-timing-function: linear
`tfss`	transition-timing-function: step-start
`tfse`	transition-timing-function: step-end

Transition Delay

클래스	CSS
`tdi`	transition-delay: inherit
`tdini`	transition-delay: initial
`tdr`	transition-delay: revert
`tdun`	transition-delay: unset

사용 예시

<!-- 호버 트랜지션 -->
<button class="bg6366F1 hover-bg4F46E5 cFFFFFF tall200msease cp">
  부드러운 호버
</button>

<!-- 투명도 트랜지션 -->
<div class="o100 hover-o50 topacity500ms">
  서서히 투명해짐
</div>