Implement animation and transition utility classes

[datacurse]

Describe the feature in detail (code, mocks, or screenshots encouraged)

Problem

Currently, animations like hover effects for cards and shrinking effects for buttons are tied to specific component classes in Skeleton. This limits our ability to apply these animations to other elements or customize them without introducing unwanted styles from the associated classes.

Proposed Solution

I propose introducing a collection of standalone animation classes that can be applied to any element, independent of component classes. This separation of animations from specific components would provide more flexibility and control over the desired effects.

Benefits

• Animation Flexibility: Users can apply a wide range of animations to any element, regardless of its class or structure.
• Customization: By decoupling animations from component classes, we can avoid unnecessary styles and layout disruptions, resulting in cleaner and more coherent designs.
• Expanded Use Cases: The ability to apply animations to various elements opens up new creative possibilities and extends the utility of the Skeleton framework.

Example Usage

<!-- Applying the 'animate-hover' class to any element to trigger a hover animation -->
<div class="animate-hover">
  <!-- Element content -->
</div>

<!-- Applying the 'animate-pressed' class to any element to simulate a pressed effect -->
<span class="animate-pressed">
  <!-- Element content -->
</span>

Considerations

• Opt-In Approach: The animation classes should be optional, allowing users to choose which animations to apply based on their specific needs.
• Backward Compatibility: Introducing these new animation classes as opt-in options ensures that existing Skeleton users are not affected by any breaking changes. Other classes like btn should remain their default animations, with optional ability to disable them.

What type of pull request would this be?

New Feature

Provide relevant links or additional information.

No response

[endigo9740]

See also: #1738

[endigo9740]

I'm going to fold this under a more widespread issue here:

• NEXT Animation Solution #2449