Begin adding support for the prefers-reduced-motion setting, Add a1…

…1y notes to the animation docs. (#14021)

assets/stylesheets/_animations.scss

@@ -5,4 +5,5 @@
 @mixin edit-post__fade-in-animation($speed: 0.2s, $delay: 0s) {
 	animation: edit-post__fade-in-animation $speed ease-out $delay;
 	animation-fill-mode: forwards;
+	@include reduce-motion;
 }

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-duration: 1ms !important;
+	}
+}

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 [vestibular disorders triggered by motion](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. Gutenberg includes a `@reduce-motion` mixin for this, to be used alongside rules that include a CSS `animate` property. 
+
 ## 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 {
@@ -30,6 +31,7 @@
 .components-animate__slide-in {
 	animation: components-animate__slide-in-animation 0.1s cubic-bezier(0, 0, 0.2, 1);
 	animation-fill-mode: forwards;
+	@include reduce-motion;
 
 	&.is-from-left {
 		transform: translateX(+100%);

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;
 	}
 }
 

packages/edit-post/src/components/fullscreen-mode/style.scss

@@ -26,6 +26,7 @@ body.js.is-fullscreen-mode {
 		.edit-post-header {
 			transform: translateY(-100%);
 			animation: edit-post-fullscreen-mode__slide-in-animation 0.1s forwards;
+			@include reduce-motion;
 		}
 	}
 }

packages/edit-post/src/components/layout/style.scss

@@ -178,6 +178,7 @@
 		border-left: $border-width solid $light-gray-500;
 		transform: translateX(+100%);
 		animation: edit-post-post-publish-panel__slide-in-animation 0.1s forwards;
+		@include reduce-motion;
 
 		body.is-fullscreen-mode & {
 			top: 0;