Begin adding support for the prefers-reduced-motion setting, Add a11y notes to the animation docs.

assets/stylesheets/_mixins.scss

@@ -333,3 +333,13 @@
 	// icon standards.
 	margin-right: 2px;
 }
+
+/**
+ * Allows users to opt-out of animations via OS-level preferences.
+ */
+
+@mixin reduce-motion {
+	@media (prefers-reduced-motion: reduce) {
+		animation: none;
+	}
+}

docs/designers-developers/designers/animation.md

@@ -28,6 +28,13 @@ In creating consistent animations, we have to establish physical rules for how e
 
 Reuse animations if one already exists for your task. 
 
+## Accessibility Considerations
+
+- Animations should be subtle. Be cognizent of users with [motion triggering vestibular disorders](https://www.ncbi.nlm.nih.gov/pubmed/29017000).
+- Don't animate elements that are currently reporting content to adaptive technology (e.g., an `aria-live` region that's receiving updates). This can cause confusion wherein the technology tries to parse a region that's actively changing.
+- Avoid animations that aren't directly triggered by user behaviors.
+- Whenever possible, ensure that animations respect the OS-level "Reduce Motion" settings. This can be done by utilizing the [`prefers-reduce-motion`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) media query. 
+
 ## Inventory of Reused Animations
 
 The generic `Animate` component is used to animate different parts of the interface. See [the component documentation](/packages/components/src/animate/README.md) for more details about the available animations. 

packages/components/src/animate/style.scss

@@ -1,6 +1,7 @@
 .components-animate__appear {
 	animation: components-animate__appear-animation 0.1s cubic-bezier(0, 0, 0.2, 1) 0s;
 	animation-fill-mode: forwards;
+	@include reduce-motion;
 
 	&.is-from-top,
 	&.is-from-top.is-from-left {

packages/components/src/modal/style.scss

@@ -42,6 +42,7 @@
 		// Animate the modal frame/contents appearing on the page.
 		animation: components-modal__appear-animation 0.1s ease-out;
 		animation-fill-mode: forwards;
+		@include reduce-motion;
 	}
 }