$type: "transition" composite

Transition Token

Transition tokens are composite tokens that bundle all the properties of a CSS transition into a single token. The $value is an object with three fields: duration (a duration token value), delay (a duration token value), and timingFunction (a cubicBezier token value). This maps directly to the CSS transition shorthand.

Value Format

A composite object with duration, delay, and timingFunction

Composite Fields

Field	Type	Required	Description
duration	duration	yes	How long the transition takes
delay	duration	yes	Delay before the transition starts
timingFunction	cubicBezier	yes	The easing curve

When to Use

Use transition tokens to standardize motion in your design system. A 'transition/interactive' token for hover states and a 'transition/page' token for route changes ensure your product moves consistently — and makes updating the motion system a one-token change.

Valid Example

Valid JSON .json

{
  "transition": {
    "interactive": {
      "$value": {
        "duration": "150ms",
        "delay": "0ms",
        "timingFunction": [0.4, 0, 0.2, 1]
      },
      "$type": "transition",
      "$description": "Standard interactive element transition"
    }
  }
}

Paste the example above into the validator to test it yourself.

Open Validator

Related Token Types