Motion

Motion Tachyons

Note: If you would like to look up the values of these Tachyons, search for them on Tachyons Search

Transition Property

Utilities for controlling which CSS properties transition.

We are following Tailwind's Transition Property for the most part. They are defined in "motion-tokens" library from the DS.

We have the following utilities for transition property:

  • transition-opacity
  • transition-colors
  • transition-height
  • transition-width
  • transition-font-size
  • transition-display (uses the flex property)
  • transition-transform
  • transition-all
  • transition-flex
  • transition-visibility

Hover me (disclaimer - this is not a button)

Transition Timing Function

Utilities for controlling the easing of CSS transitions.

  • ease-out
  • ease-in
  • ease-in-out

Hover me with ease-in

Hover me with ease-out

Hover me with ease-in-out

Transition Duration

Utilities for controlling the duration of CSS transitions.

  • duration-1000 (legacy class - might be deprecated in the future)
  • duration-100
  • duration-200
  • duration-300
  • duration-400
  • duration-500
  • duration-extra-slow
  • duration-slow
  • duration-normal
  • duration-fast
  • duration-extra-fast

Hover me with duration-100

Hover me with duration-300

Hover me with duration-extra-fast

ColorsSearch