What is the difference between transition-all and transition in TailwindCSS

user_10177569 0
Viewed 1837

Tailwind offers multiple utilities for controlling which CSS properties transition, among these properties there are transition and transition-all.

I went and checked the CSS properties for both classes and here they are in the same order.

transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;

transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;

What is the difference between both classes and which one should I use for general transitions?

tailwind-css css-transitions css html
3 Answers

To understand the difference you need to understand an important thing about animatable properties. Some of them trigger layout changes and some of them don't.

A property that trigger a layout change will have an impact on the performance so it's recommended to avoid them as much as possible

A property that doesn't trigger a layout change will have less impact on the performance and it's recommended to animate them.

The transition class of tailwind is grouping the second set of properties (the ones that don't trigger layout change) while transition-all group all of them.

It's better to rely on transition to have good performance and you should avoid as much as possible transition-all but if you are obliged to animate all the properties then use it.

Here is a good reference to help you understand what I am talking about: https://csstriggers.com/

If you check for color you can read:

Changing color does not trigger any geometry changes, which is good.

As a side note, transform is the best when it comes to performance. It doesn't trigger layout change and doesn't trigger painting:

Changing transform does not trigger any geometry changes or painting, which is very good. This means that the operation can likely be carried out by the compositor thread with the help of the GPU.

user_86203330

As you mentioned, Tailwind's transition class defines transitions for a limited set of CSS properties: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter.

When using transition-all all properties that can transition will - this includes all animatable CSS properties (properties in transition and much more).

Using one or the other will depend on which properties you want to animate, if they're all covered by transition then there's no need to use transition-all.

user_18707800

I think If you need all properties its better to use transition-all but if you want to be specific Use the transition-{properties} utilities to specify which properties should transition when they change.

e.g. transition-color going to be transition-property: background-color, border-color, color, fill, stroke; as tailwind doc

user_102852160
Related