Transitions animations

scss/_helpers.scss

@@ -10,3 +10,4 @@
 @import "helpers/stretched-link";
 @import "helpers/text-truncation";
 @import "helpers/vr";
+@import "helpers/animations";

scss/helpers/_animations.scss

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

@@ -0,0 +1,36 @@
+---
+layout: docs
+title: Animations
+description: Customize the animation direction of all the different components.
+group: helpers
+aliases: "/docs/5.3/helpers/"
+---
+
+Easily customize `animation-direction`s by adding the appropriate class.
+
+The available classes:
+
+```scss
+.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;
+}
+```
+
+
+
+The following example shows how the class `animation-direction-reverse` was used to reverse the animation direction of a spinner-border.
+
+{{< example >}}
+<div class="spinner-border text-primary animation-direction-reverse" 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