utilities/transition-property

10 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

transition-all utility class

The `transition-all` utility class sets transition-property to all, transition-timing-function to var(--default-transition-timing-function) which defaults to cubic-bezier(0.4, 0, 0.2, 1), and transition-duration to var(--default-transition-duration) which defaults to 150ms.

transition-colors utility class

The `transition-colors` utility class sets transition-property to color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, and --tw-gradient-to. It also sets transition-timing-function to var(--default-transition-timing-function) which defaults to cubic-bezier(0.4, 0, 0.2, 1), and transition-duration to var(--default-transition-duration) which defaults to 150ms.

transition-opacity utility class

The `transition-opacity` utility class sets transition-property to opacity, transition-timing-function to var(--default-transition-timing-function) which defaults to cubic-bezier(0.4, 0, 0.2, 1), and transition-duration to var(--default-transition-duration) which defaults to 150ms.

transition-shadow utility class

The `transition-shadow` utility class sets transition-property to box-shadow, transition-timing-function to var(--default-transition-timing-function) which defaults to cubic-bezier(0.4, 0, 0.2, 1), and transition-duration to var(--default-transition-duration) which defaults to 150ms.

transition-transform utility class

The `transition-transform` utility class sets transition-property to transform, translate, scale, and rotate. It also sets transition-timing-function to var(--default-transition-timing-function) which defaults to cubic-bezier(0.4, 0, 0.2, 1), and transition-duration to var(--default-transition-duration) which defaults to 150ms.

transition-none utility class

The `transition-none` utility class sets transition-property to none.

transition with custom property variable

The `transition-(<custom-property>)` syntax allows using a custom CSS property for transition-property. It sets transition-property to var(<custom-property>), transition-timing-function to var(--default-transition-timing-function) which defaults to cubic-bezier(0.4, 0, 0.2, 1), and transition-duration to var(--default-transition-duration) which defaults to 150ms.

transition with arbitrary value

The `transition-[<value>]` syntax allows using an arbitrary value for transition-property. It sets transition-property to the provided <value>, transition-timing-function to var(--default-transition-timing-function) which defaults to cubic-bezier(0.4, 0, 0.2, 1), and transition-duration to var(--default-transition-duration) which defaults to 150ms.

motion-reduce variant for transitions

Use the `motion-reduce` variant to conditionally disable transitions and transforms for users who have specified they prefer reduced motion. For example, `motion-reduce:transition-none` and `motion-reduce:hover:transform-none` can be applied to an element with `transition` and `transform` classes to respect reduced motion preferences.

motion-safe variant for transitions

Use the `motion-safe` variant to conditionally apply animations and transitions only for users who have not specified a preference for reduced motion.

Give your agent this brain