Transition Property

Utilities for controlling which CSS properties transition.

React propsCSS Properties
transitionProperty={keyword}transition-property: {keyword};


Use transitionProperty={keyword} utilities to specify which properties should transition when they change.

<x.button transition transitionProperty="background-color" transitionDuration={500} color="white" bg={{ _: 'indigo-600', hover: 'red-600' }} py={3} px={6} borderRadius="md" > Hover me </x.button>


To change which properties of an element transition at a specific breakpoint, use responsive object notation. For example, adding the property transitionProperty={{ md: "all" }} to an element would apply the transitionProperty="all" utility at medium screen sizes and above.

<x.div transitionProperty={{ md: 'all' }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.


Transition Properties

If you'd like to customize your values for transition properties, use the theme.transitionProperties section of your theme.

  // theme.js

  export const theme = {
    transitionProperties: {
      // ...
      colors: ['background-color', 'border-color', 'color', 'fill', 'stroke'],
      opacity: ['opacity'],
      shadow: ['box-shadow'],
      transform: ['transform'],
+     dialogs: ['box-shadow', 'transform'],

If you don't want to customize it, a set of transitionProperties is already defined in default theme:

const defaultTheme = {
  // ...
  transitionProperties: {
    default: [
    colors: ['background-color', 'border-color', 'color', 'fill', 'stroke'],
    opacity: ['opacity'],
    shadow: ['box-shadow'],
    transform: ['transform'],

Styled bindings


Using xstyled's styled, all transition properties defined are automatically bound to transition-property attribute:

import styled from '@xstyled/...' const Button = styled.button` transition-property: default; `

To learn more about styled syntax, read styled syntax documentation.


It is possible to manually bind a transition property using th.transitionProperty utility:

import styled from '...' import { th } from '@xstyled/...' const Button = styled.button` transition: ${th.transitionProperty('default')} 400ms; `


Get a transition property in any component using useTransitionProperty hook:

import { useTransitionProperty } from '@xstyled/...' function Button() { const transitionProperty = useTransitionProperty('default') }
Edit this page on GitHub