Transition Timing Function

Utilities for controlling the easing of CSS transitions.

React propsCSS Properties
transitionTimingFunction={timingFn}transition-timing-function: {timingFn};


Use transitionTimingFunction={timingFn} utilities to control an element's easing curve.

<x.button transition transitionDuration={700} transitionTimingFunction="ease-in" > Hover me </x.button> <x.button transition transitionDuration={700} transitionTimingFunction="ease-out" > Hover me </x.button> <x.button transition transitionDuration={700} transitionTimingFunction="ease-in-out" > Hover me </x.button>


To control an element's transition-timing-function at a specific breakpoint, use responsive object notation. For example, adding the property transitionTimingFunction={{ md: "ease-in" }} to an element would apply the transitionTimingFunction="ease-in" utility at medium screen sizes and above.

<x.div transitionTimingFunction={{ md: 'ease-in' }} />

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 timing functions defined are automatically bound to transition-timing-function attribute:

import styled from '@xstyled/...' const Button = styled.button` transition-timing-function: ease-in; `

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


It is possible to manually bind a timing function using th.timingFunction utility:

import styled from '...' import { th } from '@xstyled/...' const Button = styled.button` transition: color ${th.timingFunction('ease-in')} 150ms; `


Get a timing function in any component using useTimingFunction hook:

import { useTimingFunction } from '@xstyled/...' function Button() { const timingFunction = useTimingFunction('ease-in') }
Edit this page on GitHub