diff --git a/assets/stylesheets/_animations.scss b/assets/stylesheets/_animations.scss
index 755161bc852ff5..f856c0bf812d60 100644
--- a/assets/stylesheets/_animations.scss
+++ b/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;
 }
diff --git a/assets/stylesheets/_mixins.scss b/assets/stylesheets/_mixins.scss
index 31134cd44d09b3..50bd59d38c3551 100644
--- a/assets/stylesheets/_mixins.scss
+++ b/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;
+	}
+}
diff --git a/docs/designers-developers/designers/animation.md b/docs/designers-developers/designers/animation.md
index 66664639d3a23d..24948723e0d8c5 100644
--- a/docs/designers-developers/designers/animation.md
+++ b/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. 
diff --git a/packages/components/src/animate/style.scss b/packages/components/src/animate/style.scss
index 2d5dfcc9b5abdc..1fa4e95d0cf59a 100644
--- a/packages/components/src/animate/style.scss
+++ b/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%);
diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss
index 2058155f1f132b..5746f8047a03cd 100644
--- a/packages/components/src/modal/style.scss
+++ b/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;
 	}
 }
 
diff --git a/packages/edit-post/src/components/fullscreen-mode/style.scss b/packages/edit-post/src/components/fullscreen-mode/style.scss
index 0d044161b9e538..9d51282381eb0e 100644
--- a/packages/edit-post/src/components/fullscreen-mode/style.scss
+++ b/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;
 		}
 	}
 }
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index 504b9fbe7ac829..dc40e6321ced31 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/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;