Settings: Shake the overlay when the user clicks on the overlay shield.

chrome/browser/resources/shared/css/overlay.css

Index: chrome/browser/resources/shared/css/overlay.css
diff --git a/chrome/browser/resources/shared/css/overlay.css b/chrome/browser/resources/shared/css/overlay.css
index 994149155937b44cdc8abae1dd1fd0c45e3d2433..7f4cc0c76265d8564091199a6ea861bdbc3d2270 100644
--- a/chrome/browser/resources/shared/css/overlay.css
+++ b/chrome/browser/resources/shared/css/overlay.css
@@ -20,7 +20,7 @@
   top: 0;
 }
 
-/* The foregrounded dialog. */
+/* The foreground dialog. */
 .overlay .page {
   background: white;
   box-shadow: 0 3px 15px rgba(0, 0, 0, 0.3), 0 3px 57px rgba(0, 0, 0, 0.3);
@@ -29,6 +29,27 @@
   position: relative;
 }
 
+/* keyframes used to shake the overlay */
+@-webkit-keyframes shake {
+  0% {
+    -webkit-transform: translateX(-5px) rotateZ(-0.5deg) translateY(-2px);
+  }
+  50% {
+    -webkit-transform: translateX(0px) rotateZ(0deg) translateY(0px);
+  }
+  100% {
+    -webkit-transform: translateX(5px) rotateZ(0.5deg) translateY(-2px);
+  }
+}
+
+.overlay .page.shake {
+  -webkit-animation-direction: alternate;
+  -webkit-animation-duration: 60ms;
+  -webkit-animation-iteration-count: 7;
+  -webkit-animation-name: shake;
+  -webkit-animation-timing-function: ease-in-out;
+}
+
 .overlay .page h1 {
   -webkit-padding-end: 24px;
   -webkit-user-select: none;