Transition Property

Use utilities like transition and transition-colors to specify which properties should transition when they change.

Style('bg-blue-500 transition delay-150 duration-300 ease-in-out hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 ...', child: Text('Save Changes'))

Class reference

Class	Description
transition	transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
transition-all	transition-property: all;
transition-colors	transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
transition-opacity	transition-property: opacity;
transition-shadow	transition-property: box-shadow;
transition-transform	transition-property: transform, translate, scale, rotate;
transition-none	transition-property: none;