Add helpers to utilities and update Docs

scss/_utilities.scss

@@ -801,6 +801,19 @@ $utilities: map-merge(
       values: $zindex-levels,
     )
     // scss-docs-end utils-zindex
+    // animation-direction
+    // scss-docs-start animation utilities
+    "animation-direction": (
+      property: animation-direction,
+      class: animation-direction,
+      values: (
+        normal: normal,
+        reverse: reverse,
+        alternate: alternate,
+        alternate-reverse: alternate-reverse,
+      )
+    ),
+    // scss-docs-end animation utilities
   ),
   $utilities
 );

scss/helpers/_animations.scss

@@ -1,12 +0,0 @@
-.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;
-}

site/content/docs/5.3/helpers/animations.md

@@ -1,36 +1,49 @@
 ---
 layout: docs
 title: Animations
-description: Customize the animation direction of all the different components.
+description: Use these helpers for quickly configuring the animation direction of an element.
 group: helpers
 aliases: "/docs/5.3/helpers/"
 ---
 
-Easily customize `animation-direction`s by adding the appropriate class.
+## animation-direction-normal
 
-The available classes:
+Sets the animation direction to "normal", which plays the animation forwards (default).
 
-```scss
+```html
-.animation-direction-normal{
+<div class="animation-direction-normal">...</div>
-  animation-direction: normal;
-}
-.animation-direction-reverse{
-  animation-direction: reverse;
-}
-.animation-direction-alternate{
-  animation-direction: alternate;
-}
-.animation-direction-alternate-reverse{
-  animation-direction: alternate-reverse;
-}
 ```
 
+## animation-direction-reverse
 
+Sets the animation direction to "reverse", which plays the animation backwards.
 
-The following example shows how the class `animation-direction-reverse` was used to reverse the animation direction of a spinner-border.
+```html
+<div class="animation-direction-reverse">...</div>
+```
+
+## animation-direction-alternate
+
+- `.animation-direction-alternate`: Sets the animation direction to "alternate", which plays the animation forwards and backwards alternately.
+
+```html
+<div class="animation-direction-alternate">...</div>
+```
+
+## animation-direction-alternate-reverse
+
+- `.animation-direction-alternate-reverse`: Sets the animation direction to "alternate-reverse", which plays the animation backwards and forwards alternately.
+
+```html
+<div class="animation-direction-alternate-reverse">...</div>
+```
+
+## Example:
+
+The following example shows how the class `animation-direction-alternate` was used to alternate the animation direction of a spinner-border.
 
 {{< example >}}
-<div class="spinner-border text-primary animation-direction-reverse" role="status">
+<div class="spinner-border text-primary animation-direction-alternate" role="status">
   <span class="visually-hidden">Loading...</span>
 </div>
 {{< /example >}}