Fix scaling animation for device previews (#66132) (#66244)

Co-authored-by: jeryj <jeryj@git.wordpress.org>
Co-authored-by: getdave <get_dave@git.wordpress.org>

packages/base-styles/_animations.scss

@@ -41,3 +41,8 @@
 	@warn "The `edit-post__fade-in-animation` mixin is deprecated. Use `animation__fade-in` instead.";
 	@include animation__fade-in($speed, $delay);
 }
+
+@mixin editor-canvas-resize-animation($additional-transition-rules...) {
+	transition: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96), $additional-transition-rules;
+	@include reduce-motion("transition");
+}

packages/block-editor/src/components/block-canvas/style.scss

@@ -4,4 +4,6 @@ iframe[name="editor-canvas"] {
 	height: 100%;
 	display: block;
 	background-color: transparent;
+	// Handles transitions between device previews
+	@include editor-canvas-resize-animation;
 }

packages/block-editor/src/components/iframe/content.scss

@@ -5,20 +5,16 @@
 
 .block-editor-iframe__html {
 	transform-origin: top center;
-	// 400ms should match the animation speed used in iframe/index.js
-	$zoomOutAnimation: all 400ms cubic-bezier(0.46, 0.03, 0.52, 0.96);
-
 	// We don't want to animate the transform of the translateX because it is used
 	// to "center" the canvas. Leaving it on causes the canvas to slide around in
 	// odd ways.
-	transition: $zoomOutAnimation, transform 0s scale 0s;
-	@include reduce-motion("transition");
+	@include editor-canvas-resize-animation(transform 0s, scale 0s, padding 0s);
 
 	&.zoom-out-animation {
 		// we only want to animate the scaling when entering zoom out. When sidebars
 		// are toggled, the resizing of the iframe handles scaling the canvas as well,
 		// and the doubled animations cause very odd animations.
-		transition: $zoomOutAnimation, transform 0s;
+		@include editor-canvas-resize-animation(transform 0s);
 	}
 }