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