AAtomic CSS

transition-property

Specifies which CSS properties to animate. tpall targets all, default with shorthand tall.

Class List

ClassCSSDescription
tpalltransition-property: allTarget all CSS properties for transition
tpnonetransition-property: noneNo transition targets (disabled)
tpcolortransition-property: colorSpecify a property name (color, width, opacity, etc.)
tpcolor_transformtransition-property: color, transformSeparate multiple properties with underscore

Visual Demo

Both boxes change background color and scale on hover. The left one carries a shorthand transition and eases into it, the right one has no transition targets so the same change snaps instantly. Hover over them to compare.

tall300msease

Eases smoothly

tall300msease tpnone

Snaps instantly

Usage Examples

Shorthand tall auto-sets transition-property to all. Use for separate control only.

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

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

Class Details

tpalltransition-property: all

Targets every animatable property. The shorthand transition classes already imply it, so you rarely write it, but it is useful to undo a parent that narrowed the target list.

<!-- 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

Removes every transition target, effectively switching animation off. Layer it on for moments where animation gets in the way: an element being dragged, a user who asked for reduced motion, or a list being painted for the first time.

<!-- 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

Targets a single named property. A narrow target means less for the browser to recompute, and it prevents unrelated properties from accidentally easing as well.

<!-- 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

Targets several properties at once, with the underscore acting as the list separator in the class name. Use it to animate exactly two unrelated things, such as color and 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>

Practical Example — Card Hover and Drag State

A card that eases its shadow and offset normally, but drops its transition while being dragged so it tracks the pointer instantly.

<!-- 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>

Tips / Caveats

Targeting everything is not free

With everything targeted, layout-affecting properties become animation candidates too. Easing width or height re-runs layout every frame, so narrow the list to transform and opacity on performance-sensitive screens.

Mind the order when mixing with the shorthand

The shorthand transition classes already contain a target list. To override only the target you need a class that applies after the shorthand; otherwise it is safer to keep everything in the shorthand.

Anything not targeted applies instantly

Properties left out of the list change with no animation at all. If part of a hover eases and part of it jumps, look for a property missing from the target list.

Some properties never animate

Properties without defined intermediate values, such as display or font-family, will not ease even when listed. For a disappearing effect, combine opacity and transform instead.

Shorthand sufficient in most cases

Shorthand like tall200msease includes tpall. Rarely needs separate specification.

Disable transitions with tpnone

Use tpnone to disable. Same as tnone (transition: none).

transitiontransition-timing-functiontransition-delaywill-change