AAtomic CSS

transition-property

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

클래스 목록

클래스CSS설명
tpalltransition-property: all모든 CSS 속성을 트랜지션 대상으로 지정
tpnonetransition-property: none트랜지션 대상 속성 없음 (트랜지션 비활성화)
tpcolortransition-property: color특정 속성명 지정 (color, width, opacity 등)
tpcolor_transformtransition-property: color, transform여러 속성은 언더스코어로 구분

시각 데모

두 상자 모두 마우스를 올리면 배경색과 크기가 함께 바뀝니다. 왼쪽은 축약형 트랜지션이 걸려 있어 부드럽게 변하고, 오른쪽은 대상 속성 없음이 지정되어 있어 같은 변화가 즉시 튀듯 적용됩니다. 마우스를 올려 비교해 보세요.

tall300msease

부드럽게 변함

tall300msease tpnone

즉시 바뀜

사용 예시

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

<!-- Shorthand usage (common) -->
<button class="tall200msease hover-bg6366F1">
  Automatically includes tpall
</button>

<!-- Disable transition -->
<div class="tpnone">
  This element has no transition applied
</div>

클래스별 상세

tpalltransition-property: all

변할 수 있는 모든 속성을 트랜지션 대상으로 삼습니다. 축약형 트랜지션 클래스가 이미 이 값을 포함하므로 따로 쓸 일은 드물지만, 부모가 대상 속성을 좁혀 놓은 것을 되돌릴 때 유용합니다.

<!-- Undo a parent that narrowed the target list -->
<div class="tpcolor">
  <button class="tpall tall200msease hover-bg6366F1 hover-ts1-05">
    This button eases everything again
  </button>
</div>

tpnonetransition-property: none

트랜지션 대상을 없애 사실상 애니메이션을 끕니다. 드래그 중인 요소, 사용자가 모션 줄이기를 켠 경우, 목록이 처음 그려질 때처럼 애니메이션이 방해가 되는 순간에 덧씌워 씁니다.

<!-- Element being dragged: follow the pointer with no easing -->
<div class="tpnone tall200msease bg1E1E2E br8px p2rem">
  Dragging feels laggy if this eases.
</div>

tpcolortransition-property: color

특정 속성 하나만 대상으로 지정합니다. 대상이 좁을수록 브라우저가 다시 계산할 범위가 줄어드는 데다, 의도치 않은 속성까지 부드럽게 변해 버리는 사고도 막을 수 있습니다.

<!-- Only the text color eases, layout never re-runs -->
<a class="tpcolor tall200msease cA1A1AA hover-cFFFFFF tdn">
  Read the changelog
</a>

tpcolor_transformtransition-property: color, transform

여러 속성을 한꺼번에 지정합니다. 클래스 이름에서는 밑줄이 목록 구분자 역할을 합니다. 색과 변형처럼 성격이 다른 두 속성만 골라 애니메이션할 때 씁니다.

<!-- Exactly two properties ease, nothing else -->
<button class="tpcolor_transform tall200msease
               cA1A1AA hover-cFFFFFF hover-ts1-05
               bg1E1E2E b1pxsolid27272A br6px py12px px16px">
  Subscribe
</button>

실전 예시 — 카드 호버와 드래그 중 상태

평소에는 그림자와 이동만 부드럽게 바뀌다가, 드래그가 시작되면 트랜지션을 꺼서 포인터를 즉시 따라오게 만드는 구성입니다.

<!-- Idle card: shadow and lift ease in -->
<article class="tall200msease hover-bs0px4px12px0px6366F1 hover-neg-tty2px
                bg18181B b1pxsolid27272A br8px p2rem cp">
  <h3 class="fs16px fw600 cFAFAFA mb4px">Deploy checklist</h3>
  <p class="fs14px c71717A">Hover to lift the card.</p>
</article>

<!-- Same card while dragging: JS swaps in tpnone so it tracks instantly -->
<article class="tpnone tall200msease
                bg18181B b1pxsolid6366F1 br8px p2rem cp">
  <h3 class="fs16px fw600 cFAFAFA mb4px">Deploy checklist</h3>
  <p class="fs14px c71717A">No easing while the pointer is down.</p>
</article>

팁 / 주의사항

모든 속성을 대상으로 두는 것은 공짜가 아니다

대상이 전부이면 레이아웃에 영향을 주는 속성까지 애니메이션 후보가 됩니다. 폭이나 높이가 부드럽게 변하면 매 프레임 레이아웃이 다시 계산되므로, 성능이 중요한 화면에서는 변형과 투명도로 좁히는 편이 좋습니다.

축약형과 함께 쓰면 순서에 주의

축약형 트랜지션 클래스에는 이미 대상 속성이 들어 있습니다. 대상만 따로 바꾸고 싶다면 축약형 뒤에 적용되는 클래스를 써야 하며, 아니면 그냥 축약형 하나로 통일하는 편이 안전합니다.

대상이 아닌 속성은 즉시 적용된다

지정하지 않은 속성은 애니메이션 없이 곧바로 바뀝니다. 일부만 부드럽고 일부는 튀어 보인다면 대상 목록에서 빠진 속성이 있는지 확인하세요.

애니메이션되지 않는 속성도 있다

표시 방식이나 글꼴 계열처럼 중간값이 정의되지 않는 속성은 목록에 넣어도 부드럽게 변하지 않습니다. 사라지는 연출이 필요하다면 투명도와 변형을 조합하세요.

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

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

tpnone으로 트랜지션 비활성화

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

transitiontransition-timing-functiontransition-delaywill-change