Merge ff083b443e into 4c98145482

scss/_utilities.scss

@@ -799,8 +799,20 @@ $utilities: map-merge(
       property: z-index,
       class: z,
       values: $zindex-levels,
-    )
+    ),
     // scss-docs-end utils-zindex
+    // scss-docs-start utils-animation-direction
+    "animation-direction": (
+      property: animation-direction,
+      class: animation-direction,
+      values: (
+        normal: normal,
+        reverse: reverse,
+        alternate: alternate,
+        alternate-reverse: alternate-reverse,
+      )
+    )
+    // scss-docs-end utils-animation-direction
   ),
   $utilities
 );

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

@@ -0,0 +1,49 @@
+---
+layout: docs
+title: Animations
+description: Use these helpers for quickly configuring the animation direction of an element.
+group: helpers
+aliases: "/docs/5.3/helpers/"
+---
+
+## animation-direction-normal
+
+Sets the animation direction to "normal", which plays the animation forwards (default).
+
+```html
+<div class="animation-direction-normal">...</div>
+```
+
+## animation-direction-reverse
+
+Sets the animation direction to "reverse", which plays the animation backwards.
+
+```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-alternate" role="status">
+  <span class="visually-hidden">Loading...</span>
+</div>
+{{< /example >}}

site/data/sidebar.yml

@@ -101,6 +101,7 @@
   icon: magic
   icon_color: orange
   pages:
+    - title: Animations
     - title: Clearfix
     - title: Color & background
     - title: Colored links