Transitions animations

[ChellyAhmed]

Description

This pull request adds modifier classes in helpers/animations.scss (new file). These classes are as follows:

.animation-direction-normal{
  animation-direction: normal;
}
.animation-direction-reverse{
  animation-direction: reverse;
}
.animation-direction-alternate{
  animation-direction: alternate;
}
.animation-direction-alternate-reverse{
  animation-direction: alternate-reverse;
}

These classes are there to alter the animation behavior (direction) of any component, such as spinners.

Motivation & Context

This PR comes as a first step to solving #38150 . Another PR (#38167) introduced an alternative solution by @oraliahdz .

Type of changes

• [] Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Refactoring (non-breaking change)
• Breaking change (fix or feature that would change existing functionality)

Checklist

• I have read the contributing guidelines
• My code follows the code style of the project (using npm run lint)
• My change introduces changes to the documentation
• I have updated the documentation accordingly
• I have added tests to cover my changes
• All new and existing tests passed

Live previews

https://deploy-preview-38296--twbs-bootstrap.netlify.app/docs/5.3/helpers/animations/

Related issues

Fixes #38150

[mdo]

Feel like these should be generated with the utility API and as helpers as they are single property-value pairs.

[ChellyAhmed]

Hi @mdo , thank you for your comment.
After reading your comment, I applied modifications to my code. I used the utility API, and updated the documentation accordingly. However, after I pushed, I realized that the utilities part of the code is very similar to the code in the PR #38167 by @oraliahdz . Thus, I want to double-check if I understood your feedback accurately.

[ChellyAhmed]

I also think it is important to mention the test that failed.
It is about the max file size in the Bundelwatch check. The size of the generated utilities files exceeds the max file size for the check, as indicated in the screenshot below. However, I am not sure if it is possible to apply these modifications to the file without exceeding the max size limit. The file size is already big, and the modifications I added are not very significant.
Or is there a problem with the way I implemented it?

[julien-deramond]

Don't worry about the failed Bundlewatch test. The difference is not that important, we can still increase the limit when the review will be over.