Add a delay to the blue outline + block type label on hover

edit-post/assets/stylesheets/_animations.scss

@@ -7,6 +7,15 @@
 	}
 }
 
+@keyframes outline-fade-in {
+	from {
+		outline: $border-width solid $dark-opacity-light-500;
+	}
+	to {
+		outline: $border-width solid theme(outlines);
+	}
+}
+
 @mixin animate_fade {
 	animation: animate_fade 0.1s ease-out;
 	animation-fill-mode: forwards;
@@ -26,8 +35,13 @@
 	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;
+}
+
+@mixin outline_fade_in($speed: 0.2s, $delay: 0s) {
+	animation: outline-fade-in $speed ease-out $delay;
 	animation-fill-mode: forwards;
 }
 

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

@@ -195,7 +195,6 @@
 			content: "";
 			position: absolute;
 			outline: $border-width solid transparent;
-			transition: outline 0.1s linear;
 			pointer-events: none;
 
 			// Show wider padding for top level blocks.
@@ -233,7 +232,8 @@
 
 	// Hover style
 	&.is-hovered > .editor-block-list__block-edit::before {
-		outline: $border-width solid theme(outlines);
+		@include outline_fade_in(0.1s, 1s);
+		outline: $border-width solid $dark-opacity-light-500;
 	}
 }
 
@@ -983,7 +983,8 @@
 
 		// Animate in
 		.editor-block-list__block:hover & {
-			@include fade_in(0.1s);
+			opacity: 0;
+			@include fade_in(0.1s, 1s);
 		}
 	}
 }

packages/editor/src/components/post-title/style.scss

@@ -47,7 +47,8 @@
 	}
 
 	.editor-post-title__input:hover {
-		border-color: theme(outlines);
+		@include outline_fade_in(0.1s, 1s);
+		outline: $border-width solid $dark-opacity-light-500;
 	}
 }