AAtomic CSS

transition-property

트랜지션 시 어떤 CSS 속성을 애니메이션할지 지정합니다. tpall은 모든 속성을 대상으로 하며, 축약형 tall과 함께 사용할 때 기본값입니다.

클래스 목록

클래스CSS설명
tpalltransition-property: all모든 CSS 속성을 트랜지션 대상으로 지정
tpnonetransition-property: none트랜지션 대상 속성 없음 (트랜지션 비활성화)

사용 예시

일반적으로 축약형 tall을 사용하면 transition-property가 자동으로 all이 됩니다. 별도로 transition-property만 제어해야 할 때 사용합니다.

<!-- 축약형 사용 (일반적) -->
<button class="tall200msease hover-bg6366F1">
  자동으로 tpall 포함
</button>

<!-- 트랜지션 비활성화 -->
<div class="tpnone">
  이 요소는 트랜지션이 적용되지 않습니다
</div>

팁 & 주의사항

축약형으로 충분한 경우가 대부분

tall200msease 같은 축약형은 내부적으로 tpall을 포함합니다. 별도 지정이 필요한 경우는 드뭅니다.

tpnone으로 트랜지션 비활성화

특정 상황에서 트랜지션을 끄려면 tpnone을 사용하세요. tnone(transition: none)과 동일한 효과입니다.

transitiontransition-timing-functiontransition-delay