Add check for CSS to respect a users anim prefs. (#799)

Co-authored-by: Jared Malcolm <[email protected]>

Author: Jared-Dev

website/src/pages/animation.mdx

@@ -30,7 +30,13 @@ You can animate the "enter" phase with just a little CSS.
 .slide-down[data-reach-menu-list],
 .slide-down[data-reach-menu-items] {
   border-radius: 5px;
-  animation: slide-down 0.2s ease;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .slide-down[data-reach-menu-list],
+  .slide-down[data-reach-menu-items] {
+    animation: slide-down 0.2s ease;
+  }
 }
 ```
 
@@ -64,8 +70,6 @@ First add the CSS to define the animation:
 
 ```css
 .slide-down {
-  transition-property: transform, opacity;
-  transition-duration: 300ms;
   opacity: 0;
   transform: translateY(-10px);
 }
@@ -78,6 +82,13 @@ First add the CSS to define the animation:
 .slide-down.exit {
   opacity: 0;
 }
+
+@media (prefers-reduced-motion: no-preference) {
+  .slide-down {
+    transition-property: transform, opacity;
+    transition-duration: 300ms;
+  }
+}
 ```
 
 Then import the Phased component: