Different transitions for :hover states

[MichaelChistyakov]

Clear and concise description of the problem

It would be great to be able to customize different transitions for component hover states.

For example, I believe that buttons (and other elements) should respond almost instantly to mouse hover. For example:

.element {
	background-color: red;
	transition: background-color 0.35s ease-out;
}
.element:hover {
	background-color: blue;
	transition: background-color 0.05s ease-out;
}

And when the mouse leaves the component, a smoother transition can be used.

In this case, the user interface will respond instantly and there will be a nice "wave" effect when the user quickly hovers over a group of components.
Currently, you have to wait for the button to respond to mouse hover.

Also I also suggest adding 'will-change' css rules to some components to eliminate rendering bugs. For example, the popover component (see attachment).

Suggested solution

Separate transition settings into static and hover states.

Add a "will-change" option for components to force their rendering with special care.

Alternative

No response

Additional context

No response

Validations

• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.