Address feedback.

This retires a few animations, and moves others that are only used once to their respective scopes.

assets/stylesheets/_animations.scss

@@ -1,41 +1,12 @@
-@mixin editor-animation__animate-fade {
-	animation: editor-animation__animate-fade 0.1s ease-out;
-	animation-fill-mode: forwards;
-}
-
-@mixin editor-animation__move-background {
-	background-size: 28px 28px;
-	animation: editor-animation__move-background 0.5s linear infinite;
-}
-
 @mixin editor-animation__loading-fade {
 	animation: editor-animation__loading-fade 1.6s ease-in-out infinite;
 }
 
-@mixin editor-animation__slide-in-right {
-	transform: translateX(+100%);
-	animation: editor-animation__slide-in-right 0.1s forwards;
-}
-
-@mixin editor-animation__slide-in-top {
-	transform: translateY(-100%);
-	animation: editor-animation__slide-in-top 0.1s forwards;
-}
-
 @mixin editor-animation__fade-in($speed: 0.2s, $delay: 0s) {
 	animation: editor-animation__fade-in $speed ease-out $delay;
 	animation-fill-mode: forwards;
 }
 
-@mixin editor-animation__region-focus($speed: 0.2s) {
-	animation: editor-animation__region-focus $speed ease-out;
-	animation-fill-mode: forwards;
-}
-
-@mixin editor-animation__rotation($speed: 1s) {
-	animation: editor-animation__rotation $speed infinite linear;
-}
-
 @mixin editor-animation__modal-appear() {
 	animation: editor-animation__modal-appear 0.1s ease-out;
 	animation-fill-mode: forwards;

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

packages/components/src/spinner/style.scss

@@ -19,6 +19,15 @@
 		height: 4px;
 		border-radius: 100%;
 		transform-origin: 6px 6px;
-		@include editor-animation__rotation;
+		animation: editor-animation__rotation 1s infinite linear;
+	}
+}
+
+@keyframes editor-animation__rotation {
+	from {
+		transform: rotate(0deg);
+	}
+	to {
+		transform: rotate(360deg);
 	}
 }

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

@@ -22,6 +22,13 @@ body.is-fullscreen-mode {
 	@include editor-animation__fade-in(0.3s);
 
 	.edit-post-header {
-		@include editor-animation__slide-in-top();
+		transform: translateY(-100%);
+		animation: editor-animation__slide-in-top 0.1s forwards;
+	}
+}
+
+@keyframes editor-animation__slide-in-top {
+	100% {
+		transform: translateY(0%);
 	}
 }

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

@@ -128,14 +128,21 @@
 		left: auto;
 		width: $sidebar-width;
 		border-left: $border-width solid $light-gray-500;
-		@include editor-animation__slide-in-right;
+		transform: translateX(+100%);
+		animation: editor-animation__slide-in-right 0.1s forwards;
 
 		body.is-fullscreen-mode & {
 			top: 0;
 		}
 	}
 }
 
+@keyframes editor-animation__slide-in-right {
+	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 {

packages/edit-post/src/style.scss

@@ -28,26 +28,6 @@
 // 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 editor-animation__animate-fade {
-	from {
-		opacity: 0;
-		transform: translateY(4px);
-	}
-	to {
-		opacity: 1;
-		transform: translateY(0);
-	}
-}
-
-@keyframes editor-animation__move-background {
-	from {
-		background-position: 0 0;
-	}
-	to {
-		background-position: 28px 0;
-	}
-}
-
 @keyframes editor-animation__loading-fade {
 	0% {
 		opacity: 0.5;
@@ -60,17 +40,6 @@
 	}
 }
 
-@keyframes editor-animation__slide-in-right {
-	100% {
-		transform: translateX(0%);
-	}
-}
-
-@keyframes editor-animation__slide-in-top {
-	100% {
-		transform: translateY(0%);
-	}
-}
 @keyframes editor-animation__fade-in {
 	from {
 		opacity: 0;
@@ -80,24 +49,6 @@
 	}
 }
 
-@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;
-	}
-}
-
-@keyframes editor-animation__rotation {
-	from {
-		transform: rotate(0deg);
-	}
-	to {
-		transform: rotate(360deg);
-	}
-}
-
 @keyframes editor-animation__modal-appear {
 	from {
 		margin-top: $grid-size * 4;

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 editor-animation__move-background {
+"@keyframes editor-animation__fade-in {
 from {
-background-position: 0 0;
+opacity: 0;
 }
 }"
 `;

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 editor-animation__move-background {
+		@keyframes editor-animation__fade-in {
 			from {
-				background-position: 0 0;
+				opacity: 0;
 			}
 		}`;
 		const output = traverse( input, callback );