Add a delay to the block type label on hover (#9197)

* Adding a delay to block hover animations.

When a user mouses over a block, they're currently presented with a dark blue outline and text label. This can be jarring, and add to a feeling of Gutenberg being "heavy" with its UI. This PR explores replacing that blue outline with a light gray outline initially, and introducing the blue outline and label after a short delay.

* Adding an outline color delay to the page header.

* Reinstating the blue outline hover state.

* Speed up the fade-in animation for the block label.

edit-post/assets/stylesheets/_animations.scss

@@ -26,8 +26,8 @@
 	animation: slide_in_right 0.1s forwards;
 }
 
-@mixin fade_in($speed: 0.2s) {
-	animation: fade-in $speed ease-out;
+@mixin fade_in($speed: 0.2s, $delay: 0s) {
+	animation: fade-in $speed ease-out $delay;
 	animation-fill-mode: forwards;
 }
 

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

@@ -1004,7 +1004,8 @@
 
 		// Animate in
 		.editor-block-list__block:hover & {
-			@include fade_in(0.1s);
+			opacity: 0;
+			@include fade_in(60ms, 0.5s);
 		}
 	}
 }