Try a modal appear animation

This is the first in a series of tiny micro interaction animations I hope to add across the UI. It adds a "fade & appear" animation to any modal you open. It's fast, but it's smooth, and it's non intrusive.

However this animation also brings with us a challenge that needs solving — right now the "Close dialog" tooltip shows every time a modal is opened. This is a problem on its own because it sends mixed signals to the user: I just opened this dialog, should I close it again?

But specifically in this case, the tooltip appears mid-animation which means it's not correctly aligned.

How do we fix this? Here are some thoughts:

- Don't focus the close button. Focus the header, or the modal itself instead, so a single press of the "Tab" button focuses it. I volunteer to make a giant in-your-face focus style for the modal, a dashed line inside the entire thing, if we can do this.
- Don't show the tooltip when the close button is focused on modals.

What other solutions can you think of? It really is a bad experience for sighted users as it is.

edit-post/assets/stylesheets/_animations.scss

@@ -57,3 +57,17 @@
 @mixin animate_rotation($speed: 1s) {
 	animation: rotation $speed infinite linear;
 }
+
+@keyframes modal-appear {
+	from {
+		transform: translate(-50%, -20%);
+	}
+	to {
+		transform: translate(-50%, -30%); // Matches the starting state of the Modal.
+	}
+}
+
+@mixin modal_appear() {
+	animation: modal-appear 0.1s ease-out;
+	animation-fill-mode: forwards;
+}

packages/components/src/modal/style.scss

@@ -7,10 +7,16 @@
 	left: 0;
 	background-color: rgba($white, 0.4);
 	z-index: z-index(".components-modal__screen-overlay");
+
+	// Animate appearance.
+	@include fade-in();
 }
 
 // The modal window element.
 .components-modal__frame {
+	// Animate appearance.
+	@include modal_appear();
+
 	// In small screens the content needs to be full width.
 	position: fixed;
 	top: 0;