animation-play-state utilities

[Paillat-dev]

I'd like to propose adding utilities for the animation-play-state CSS property in Tailwind CSS. This would allow developers to easily control the playback state of animations without writing custom CSS.

Suggested utilities (this is just an idea):

• animation-running: Sets animation-play-state: running;
• animation-pause: Sets animation-play-state: paused;
• animation-inherit: Sets animation-play-state: inherit;
• animation-initial: Sets animation-play-state: initial;
• animation-revert: Sets animation-play-state: revert;
• animation-revert-layer: Sets animation-play-state: revert-layer;
• animation-none: Sets animation-play-state: unset;

These utilities would be particularly useful for controlling animations based on user interactions (e.g., pausing on hover) or application state (e.g., pausing during loading).

Example usage:

<div class="animate-bounce animation-running hover:animation-pause">
  Loading...
</div>

What do you think? This would enhance Tailwind's animation capabilities without adding much complexity.

For reference: https://developer.mozilla.org/en-US/docs/web/css/animation-play-state
Related to: #3654