diff --git a/assets/stylesheets/_animations.scss b/assets/stylesheets/_animations.scss
index 7b14a7036e6d25..755161bc852ff5 100644
--- a/assets/stylesheets/_animations.scss
+++ b/assets/stylesheets/_animations.scss
@@ -1,78 +1,8 @@
-@keyframes fade-in {
-	from {
-		opacity: 0;
-	}
-	to {
-		opacity: 1;
-	}
+@mixin edit-post__loading-fade-animation {
+	animation: edit-post__loading-fade-animation 1.6s ease-in-out infinite;
 }
 
-@mixin animate_fade {
-	animation: animate_fade 0.1s ease-out;
-	animation-fill-mode: forwards;
-}
-
-@mixin move_background {
-	background-size: 28px 28px;
-	animation: move_background 0.5s linear infinite;
-}
-
-@mixin loading_fade {
-	animation: loading_fade 1.6s ease-in-out infinite;
-}
-
-@mixin slide_in_right {
-	transform: translateX(+100%);
-	animation: slide_in_right 0.1s forwards;
-}
-
-@mixin slide_in_top {
-	transform: translateY(-100%);
-	animation: slide_in_top 0.1s forwards;
-}
-
-@mixin fade_in($speed: 0.2s, $delay: 0s) {
-	animation: fade-in $speed ease-out $delay;
-	animation-fill-mode: forwards;
-}
-
-@keyframes editor_region_focus {
-	from {
-		box-shadow: inset 0 0 0 0 $blue-medium-400;
-	}
-	to {
-		box-shadow: inset 0 0 0 4px $blue-medium-400;
-	}
-}
-
-@mixin region_focus($speed: 0.2s) {
-	animation: editor_region_focus $speed ease-out;
-	animation-fill-mode: forwards;
-}
-
-@keyframes rotation {
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-}
-
-@mixin animate_rotation($speed: 1s) {
-	animation: rotation $speed infinite linear;
-}
-
-@keyframes modal-appear {
-	from {
-		margin-top: $grid-size * 4;
-	}
-	to {
-		margin-top: 0;
-	}
-}
-
-@mixin modal_appear() {
-	animation: modal-appear 0.1s ease-out;
+@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;
 }
diff --git a/packages/block-library/src/file/editor.scss b/packages/block-library/src/file/editor.scss
index 194fe3c62cd6e0..25e78effbd528a 100644
--- a/packages/block-library/src/file/editor.scss
+++ b/packages/block-library/src/file/editor.scss
@@ -5,7 +5,7 @@
 	margin-bottom: 0;
 
 	&.is-transient {
-		@include loading_fade;
+		@include edit-post__loading-fade-animation;
 	}
 
 	.wp-block-file__content-wrapper {
diff --git a/packages/block-library/src/gallery/editor.scss b/packages/block-library/src/gallery/editor.scss
index 26ea875564805b..09cffa82ae94f7 100644
--- a/packages/block-library/src/gallery/editor.scss
+++ b/packages/block-library/src/gallery/editor.scss
@@ -18,7 +18,7 @@ ul.wp-block-gallery li {
 	}
 
 	&.is-transient img {
-		@include loading_fade;
+		@include edit-post__loading-fade-animation;
 	}
 
 	.editor-rich-text {
@@ -121,3 +121,14 @@ ul.wp-block-gallery li {
 	left: 50%;
 	transform: translate(-50%, -50%);
 }
+
+// Last item always needs margins reset.
+// When block is selected, only reset the right margin of the 2nd to last item.
+.wp-block-gallery {
+	.is-selected & .blocks-gallery-image:nth-last-child(2),
+	.is-selected & .blocks-gallery-item:nth-last-child(2),
+	.is-typing & .blocks-gallery-image:nth-last-child(2),
+	.is-typing & .blocks-gallery-item:nth-last-child(2) {
+		margin-right: 0;
+	}
+}
diff --git a/packages/block-library/src/gallery/style.scss b/packages/block-library/src/gallery/style.scss
index a43d08046bb5e4..26053298a3b3b7 100644
--- a/packages/block-library/src/gallery/style.scss
+++ b/packages/block-library/src/gallery/style.scss
@@ -114,13 +114,8 @@
 	}
 
 	// Last item always needs margins reset.
-	// When block is selected, only reset the right margin of the 2nd to last item.
 	.blocks-gallery-image:last-child,
-	.blocks-gallery-item:last-child,
-	.is-selected & .blocks-gallery-image:nth-last-child(2),
-	.is-selected & .blocks-gallery-item:nth-last-child(2),
-	.is-typing & .blocks-gallery-image:nth-last-child(2),
-	.is-typing & .blocks-gallery-item:nth-last-child(2) {
+	.blocks-gallery-item:last-child {
 		margin-right: 0;
 	}
 
diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss
index 5e0135fe3ebd60..944eacbd0b650f 100644
--- a/packages/block-library/src/image/editor.scss
+++ b/packages/block-library/src/image/editor.scss
@@ -2,7 +2,7 @@
 	position: relative;
 
 	&.is-transient img {
-		@include loading_fade;
+		@include edit-post__loading-fade-animation;
 	}
 
 	figcaption img {
diff --git a/packages/components/src/higher-order/navigate-regions/style.scss b/packages/components/src/higher-order/navigate-regions/style.scss
index 21f8f8b5a728b8..3d50aef11067ff 100644
--- a/packages/components/src/higher-order/navigate-regions/style.scss
+++ b/packages/components/src/higher-order/navigate-regions/style.scss
@@ -8,6 +8,16 @@
 		right: 0;
 		pointer-events: none;
 		outline: 4px solid transparent; // Shown in Windows High Contrast mode.
-		@include region_focus(0.1s);
+		animation: editor-animation__region-focus 0.2s ease-out;
+		animation-fill-mode: forwards;
+	}
+}
+
+@keyframes editor-animation__region-focus {
+	from {
+		box-shadow: inset 0 0 0 0 $blue-medium-400;
+	}
+	to {
+		box-shadow: inset 0 0 0 4px $blue-medium-400;
 	}
 }
diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss
index 04d87316c383b0..16b5e165ad1d06 100644
--- a/packages/components/src/modal/style.scss
+++ b/packages/components/src/modal/style.scss
@@ -9,7 +9,7 @@
 	z-index: z-index(".components-modal__screen-overlay");
 
 	// This animates the appearance of the white background.
-	@include fade-in();
+	@include edit-post__fade-in-animation();
 }
 
 // The modal window element.
@@ -40,7 +40,17 @@
 		transform: translate(-50%, -50%);
 
 		// Animate the modal frame/contents appearing on the page.
-		@include modal_appear();
+		animation: components-modal__appear-animation 0.1s ease-out;
+		animation-fill-mode: forwards;
+	}
+}
+
+@keyframes components-modal__appear-animation {
+	from {
+		margin-top: $grid-size * 4;
+	}
+	to {
+		margin-top: 0;
 	}
 }
 
diff --git a/packages/components/src/spinner/style.scss b/packages/components/src/spinner/style.scss
index a8b34fdba0573b..286b8204edd7d5 100644
--- a/packages/components/src/spinner/style.scss
+++ b/packages/components/src/spinner/style.scss
@@ -19,6 +19,15 @@
 		height: 4px;
 		border-radius: 100%;
 		transform-origin: 6px 6px;
-		@include animate_rotation;
+		animation: components-spinner__animation 1s infinite linear;
+	}
+}
+
+@keyframes components-spinner__animation {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
 	}
 }
diff --git a/packages/edit-post/src/components/fullscreen-mode/style.scss b/packages/edit-post/src/components/fullscreen-mode/style.scss
index b1ed94ff7452f2..8e5b6e2218561d 100644
--- a/packages/edit-post/src/components/fullscreen-mode/style.scss
+++ b/packages/edit-post/src/components/fullscreen-mode/style.scss
@@ -19,9 +19,16 @@ body.js.is-fullscreen-mode {
 	}
 
 	// Animations
-	@include fade_in(0.3s);
+	@include edit-post__fade-in-animation(0.3s);
 
 	.edit-post-header {
-		@include slide_in_top();
+		transform: translateY(-100%);
+		animation: edit-post-fullscreen-mode__slide-in-animation 0.1s forwards;
+	}
+}
+
+@keyframes edit-post-fullscreen-mode__slide-in-animation {
+	100% {
+		transform: translateY(0%);
 	}
 }
diff --git a/packages/edit-post/src/components/layout/style.scss b/packages/edit-post/src/components/layout/style.scss
index ae925dbdd181e0..0cd4a03af0dfeb 100644
--- a/packages/edit-post/src/components/layout/style.scss
+++ b/packages/edit-post/src/components/layout/style.scss
@@ -128,7 +128,8 @@
 		left: auto;
 		width: $sidebar-width;
 		border-left: $border-width solid $light-gray-500;
-		@include slide_in_right;
+		transform: translateX(+100%);
+		animation: edit-post-layout__slide-in-animation 0.1s forwards;
 
 		body.is-fullscreen-mode & {
 			top: 0;
@@ -136,6 +137,12 @@
 	}
 }
 
+@keyframes edit-post-layout__slide-in-animation {
+	100% {
+		transform: translateX(0%);
+	}
+}
+
 .edit-post-layout .editor-post-publish-panel__header-publish-button {
 	// Match the size of the Publish... button.
 	.components-button.is-large {
diff --git a/packages/edit-post/src/style.scss b/packages/edit-post/src/style.scss
index 23c040743210c9..8dd038300daea3 100644
--- a/packages/edit-post/src/style.scss
+++ b/packages/edit-post/src/style.scss
@@ -20,28 +20,15 @@
 @import "./components/visual-editor/style.scss";
 @import "./components/options-modal/style.scss";
 
-// Fade animations
-@keyframes animate_fade {
-	from {
-		opacity: 0;
-		transform: translateY(4px);
-	}
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
-}
 
-@keyframes move_background {
-	from {
-		background-position: 0 0;
-	}
-	to {
-		background-position: 28px 0;
-	}
-}
+/**
+ * Animations
+ */
 
-@keyframes loading_fade {
+// These keyframes should not be part of the _animations.scss mixins file.
+// Because keyframe animations can't be defined as mixins properly, they are duplicated.
+// Since hey are intended only for the editor, we add them here instead.
+@keyframes edit-post__loading-fade-animation {
 	0% {
 		opacity: 0.5;
 	}
@@ -53,15 +40,12 @@
 	}
 }
 
-@keyframes slide_in_right {
-	100% {
-		transform: translateX(0%);
+@keyframes edit-post__fade-in-animation {
+	from {
+		opacity: 0;
 	}
-}
-
-@keyframes slide_in_top {
-	100% {
-		transform: translateY(0%);
+	to {
+		opacity: 1;
 	}
 }
 
diff --git a/packages/editor/src/components/block-list/style.scss b/packages/editor/src/components/block-list/style.scss
index 670e53099e947a..09a492374bdae3 100644
--- a/packages/editor/src/components/block-list/style.scss
+++ b/packages/editor/src/components/block-list/style.scss
@@ -909,7 +909,7 @@
 		// Animate in
 		.editor-block-list__block:hover & {
 			opacity: 0;
-			@include fade_in(60ms, 0.5s);
+			@include edit-post__fade-in-animation(60ms, 0.5s);
 		}
 	}
 
diff --git a/packages/editor/src/components/block-mover/style.scss b/packages/editor/src/components/block-mover/style.scss
index ee793843e2ebe4..8c6a0b6e4136cb 100644
--- a/packages/editor/src/components/block-mover/style.scss
+++ b/packages/editor/src/components/block-mover/style.scss
@@ -3,7 +3,7 @@
 	opacity: 0;
 
 	&.is-visible {
-		@include fade_in;
+		@include edit-post__fade-in-animation;
 	}
 
 	// 24px is the smallest size of a good pressable button.
diff --git a/packages/editor/src/components/post-saved-state/style.scss b/packages/editor/src/components/post-saved-state/style.scss
index 0b74a6820fff54..68ca157e2077d4 100644
--- a/packages/editor/src/components/post-saved-state/style.scss
+++ b/packages/editor/src/components/post-saved-state/style.scss
@@ -5,7 +5,7 @@
 	overflow: hidden;
 
 	&.is-saving {
-		animation: loading_fade 0.5s infinite;
+		animation: edit-post__loading-fade-animation 0.5s infinite;
 	}
 
 	.dashicon {
diff --git a/packages/editor/src/editor-styles/transforms/test/__snapshots__/wrap.js.snap b/packages/editor/src/editor-styles/transforms/test/__snapshots__/wrap.js.snap
index 868585dc2952ae..873091eacb77d8 100644
--- a/packages/editor/src/editor-styles/transforms/test/__snapshots__/wrap.js.snap
+++ b/packages/editor/src/editor-styles/transforms/test/__snapshots__/wrap.js.snap
@@ -8,9 +8,9 @@ src: url(sansation_light.woff);
 `;
 
 exports[`CSS selector wrap should ignore keyframes 1`] = `
-"@keyframes move_background {
+"@keyframes edit-post__fade-in-animation {
 from {
-background-position: 0 0;
+opacity: 0;
 }
 }"
 `;
diff --git a/packages/editor/src/editor-styles/transforms/test/wrap.js b/packages/editor/src/editor-styles/transforms/test/wrap.js
index ba2e02cd6b00a0..5500d4a747e41a 100644
--- a/packages/editor/src/editor-styles/transforms/test/wrap.js
+++ b/packages/editor/src/editor-styles/transforms/test/wrap.js
@@ -40,9 +40,9 @@ describe( 'CSS selector wrap', () => {
 	it( 'should ignore keyframes', () => {
 		const callback = wrap( '.my-namespace' );
 		const input = `
-		@keyframes move_background {
+		@keyframes edit-post__fade-in-animation {
 			from {
-				background-position: 0 0;
+				opacity: 0;
 			}
 		}`;
 		const output = traverse( input, callback );