Action-driven CSS animations

Polish your animations by animating based on actions or events, like mouse-enter and mouse-leave, instead of animating based on states, like default and hover state.

I got the idea from Josh W Comeau's comprehensive article An Interactive Guide to CSS Transitions. From the Action-driven motion section:

I believe most developers think in terms of states: for example, you might look at this situation and say that we have a "hover" state and a default state. Instead, what if we thought in terms of actions? We animate based on what the user is doing, thinking in terms of events, not states. We have a mouse-enter animation and a mouse-leave animation.

Example: modals

Another common example is modals. It can be useful for modals to enter with an ease-out animation, and to exit with a quicker ease-in animation.

This is a small detail, but it speaks to a much larger idea.

Exiting a modal quickly is great because if the user has closed the modal, they are not interested in it anymore. Having to watch the modal slide away slowly would be pointless.