UX corrections to new FRE Welcome page.

chrome/browser/resources/welcome/welcome.css

 /* Copyright 2016 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
 body {
   align-items: center;
   color: var(--paper-grey-900);
   display: flex;
   flex-direction: column;
   font-size: 100%;
   justify-content: center;
-  min-height: 96vh;
+  min-height: 100vh;
   overflow-y: hidden;
-  padding: 16px;
 }
 
 @keyframes slideUpContent {
   from {
     transform: translateY(186px);
   }
 }
 
 @keyframes fadeIn {
   from {
@@ skipping 10 matching lines @@
 
 @keyframes fadeInAndSlideUp {
   from {
     opacity: 0;
     transform: translateY(8px);
   }
 }
 
 @keyframes spin {
   from {
-    transform: rotate(-1440deg);
+    transform: rotate(-1440deg) scale(0.8);
   }
 }
 
 @keyframes fadeInAndSlideDownShadow {
   from {
     opacity: .6;
-    top: 8px;
+    top: 0;
   }
 }
 
 @keyframes scaleUp {
   0% {
     transform: scale(.8);
   }
 }
 
-.spacer {
-  flex: 1;
-  max-height: 96px;
+@keyframes colorize {
+  from {
+    -webkit-filter: grayscale(100%);
+    opacity: .6;
+  }
+}
+
+@keyframes bounce {
+  0% {
+    transform: matrix3d(0.8, 0, 0, 0, 0, 0.8, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  7.61% {
+    transform: matrix3d(0.907, 0, 0, 0, 0, 0.907, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  11.41% {
+    transform: matrix3d(0.948, 0, 0, 0, 0, 0.948, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  15.12% {
+    transform: matrix3d(0.976, 0, 0, 0, 0, 0.976, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  18.92% {
+    transform: matrix3d(0.996, 0, 0, 0, 0, 0.996, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  22.72% {
+    transform: matrix3d(1.008, 0, 0, 0, 0, 1.008, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  30.23% {
+    transform: matrix3d(1.014, 0, 0, 0, 0, 1.014, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  50.25% {
+    transform: matrix3d(1.003, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  70.27% {
+    transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  100% {
+    transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
 }
 
 .content {
   align-items: center;
   animation: slideUpContent 600ms 1.8s cubic-bezier(.4, .2, 0, 1) both;
   display: flex;
   flex: 1;
   flex-direction: column;
   justify-content: center;
   max-width: 500px;
 }
 
 .heading {
   animation: fadeInAndSlideUp 600ms 1.9s cubic-bezier(.4, .2, 0, 1) both;
   font-size: 2.125em;
   margin-bottom: .25em;
   margin-top: 1.5em;
+  text-align: center;
 }
 
 .subheading {
   animation: fadeInAndSlideUp 600ms 1.9s cubic-bezier(.4, .2, 0, 1) both;
   color: var(--google-grey-500);
   font-size: 1em;
   margin-top: .25em;
+  text-align: center;
 }
 
 .logo {
-  animation: fadeIn 600ms both;
+  animation: fadeIn 600ms both, bounce 1s 600ms linear both;
   height: 96px;
   position: relative;
   width: 96px;
 }
 
 .logo-icon {
-  animation: scaleUp 600ms 500ms cubic-bezier(.5, -.5, 0, 2.25) both;
-  background: white;
-  border-radius: 50%;
+  animation: spin 2.4s cubic-bezier(.4, .2, 0, 1) both,
+             colorize 300ms 700ms linear both;
+  content: -webkit-image-set(url(chrome://welcome/logo.png) 1x,
+                             url(chrome://welcome/logo2x.png) 2x);
   height: 96px;
+  left: 0;
+  position: absolute;
   width: 96px;
 }
 
-.logo-bw,
-.logo-color {
-  animation: fadeIn 600ms 500ms both,
-             spin 2.4s cubic-bezier(.4, .2, 0, 1) both;
-  content: -webkit-image-set(url(logo.png) 1x, url(logo2x.png) 2x);
-  left: -5px;
-  position: absolute;
-  top: -5px;
-  width: 106px;
-}
-
-.logo-bw {
-  -webkit-filter: grayscale(100%);
-}
-
-.logo-color {
-  animation: fadeIn 300ms 700ms both,
-             spin 2.4s cubic-bezier(.4, .2, 0, 1) both;
-}
-
 .logo-shadow {
   -webkit-filter: blur(16px);
   animation: fadeInAndSlideDownShadow 300ms 600ms both;
   background: rgba(0, 0, 0, .2);
   border-radius: 50%;
   height: 96px;
   position: absolute;
   top: 16px;
   width: 96px;
   z-index: -1;
@@ skipping 14 matching lines @@
 .signin-buttons {
   align-items: center;
   display: flex;
   flex-direction: column;
   margin-top: 2em;
 }
 
 .action {
   background: var(--google-blue-500);
   color: white;
-  font-size: .75em;
+  font-size: .875em;
   font-weight: 500;
   line-height: 2.5em;
-  padding: 0 1.25em;
+  padding: 0.1em 1.5em;
+}
+
+.action:active {
+  background: var(--google-blue-500);
 }
 
 .action:focus {
   background: var(--google-blue-700);
 }
 
 .link {
-  color: var(--google-blue-500);
+  color: var(--google-blue-700);
   display: inline-block;
-  font-size: .75em;
+  font-size: .875em;
   margin: 1.5em;
   text-align: center;
   text-decoration: none;
 }
 
 .link:hover {
   text-decoration: underline;
 }
 
 .watermark {
   -webkit-mask-image: url(chrome://welcome/watermark.svg);
   -webkit-mask-repeat: no-repeat;
   -webkit-mask-size: 100%;
+  animation: fadeIn 1s cubic-bezier(0, 0, .2, 1) both;
   background: var(--paper-grey-400);
+  bottom: 24px;
   height: 24px;
-  margin-top: 48px;
+  position: absolute;
   width: 74px;
 }