Skip to content
StyleStyle Docs

Transition Timing Function

Use utilities like ease-in and ease-out to control the easing curve of an element’s transition.

Style('duration-300 ease-in ...', child: Text('Button A'))
Style('duration-300 ease-out ...', child: Text('Button B'))
Style('duration-300 ease-in-out ...', child: Text('Button C'))

Class reference

Section titled “Class reference”
ClassDescription
ease-lineartransition-timing-function: linear;
ease-intransition-timing-function: cubic-bezier(0.4, 0, 1, 1);
ease-outtransition-timing-function: cubic-bezier(0, 0, 0.2, 1);
ease-in-outtransition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);