new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Tailwind CSS · Utilities reference · all subjects

transition-property

11 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 CSS output

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

transition-colors utility class CSS output

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

transition-opacity utility class CSS output

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

transition-shadow utility class CSS output

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

transition-transform utility class CSS output

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

transition-none utility class CSS output

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

Custom transition property with CSS custom property syntax

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

Custom transition property with arbitrary value syntax

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

motion-reduce variant disables transitions

Use the motion-reduce variant to disable transitions and transforms for users who prefer reduced motion. For example, motion-reduce:transition-none and motion-reduce:hover:transform-none can be used with the motion-reduce variant to respect user motion preferences.

transition utilities work with responsive prefixes

Transition utilities support responsive design prefixes. For example, you can use classes like md:transition-all or lg:transition-none to apply different transition properties at different breakpoints.

Basic transition example with multiple utilities

Example HTML showing how to combine transition utilities with other utilities: <button class="bg-blue-500 transition delay-150 duration-300 ease-in-out hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500">Save Changes</button>. This applies a transition to multiple properties with a 150ms delay, 300ms duration, and ease-in-out timing function.

Give your agent this brain