Transitions, when details matters

When we develop an interactive interface, we have to think about the dynamism of the information and how to make the components interactive and functional.
The best solutions to reach this purpose are animations, transformations and transitions.
However, there is always a cost to pay, in our area it is performance.

Among the solutions mentioned above, transitions are the cheapest in terms of performance.
In the change of state with pseudo classes, such as :hover, :focus, transitions are very valuable.

This can be in the form used in the contracted form

.block {
  transition: width 2s linear;
}

or you can refer to its specifications:

.block {
  transition-property: color;
  transition-duration: 3s;
  transition-timing-function: linear;
  transition-delay: .5s;
}

Not using transitions in a graphic change means providing a "jerky" experience. Please dont!
We have the right tools, let’s learn to use them correctly, knowing the details, for example, often a single transition is written:

.block {
  transition: all 2s linear;
}

it sounds like an innocent statement, but this leads our browsers into a search for properties that have undergone a change.

We need to be specific in CSS declarations and help our browsers to read our CSS lightly, saving their resources as much as possible.

In the codepen reported, at the :focus or :hover of one of the three musketeers I apply two transitions:

transition: transform 9000ms cubic-bezier (0.075, 0.82, 0.165, 1), filter 900ms cubic-bezier (0.075, 0.82, 0.165, 1);

I am specific in each declaration, referring to the individual properties, listed one after the other.