[cros] OOBE slide animation.

chrome/browser/resources/chromeos/login/oobe.css

 /* Copyright (c) 2012 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.
  *
  * This is the stylesheet used by the Out of the box experience (OOBE) flow,
  * sign in and lock screens.
  */
 
 html,
 body {
@@ skipping 54 matching lines @@
   min-width: 72px !important;
 }
 
 #back-button {
   -webkit-margin-end: 8px;
 }
 
 #outer-container {
   -webkit-box-align: center;
   -webkit-box-pack: center;
+  -webkit-perspective: 600px;
   bottom: 41px;  /* Leave space for the header bar */
   display: -webkit-box;
   left: 0;
   position: absolute;
   right: 0;
   top: 0;
 }
 
 html[oobe=old] #oobe {
   margin-top: 20px;  /* Compensate bottom header to center content. */
 }
 
 html[oobe=new] #oobe {
   margin-top: 40px;  /* Compensate bottom header to center content. */
 }
 
 #inner-container {
-  /* Height/width of each step is set manually,
-     see DisplayManager.toggleStep_() */
-  height: 294px;
   position: relative;
-  width: 640px;
 }
 
 html[oobe=old] #inner-container {
   padding: 20px;
 }
 
 html[oobe=new] #inner-container {
+  background: -webkit-linear-gradient(rgba(255,255,255,0.99),
+                                      rgba(255,255,255,0.95));
+  border-radius: 2px;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
+              0 4px 23px 5px rgba(0, 0, 0, 0.2),
+              0 2px 6px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
   padding: 0;
 }
 
+/* Only play this animation when 'down' class is removed. */
+html[oobe=new] #inner-container:not(.down) {
+  -webkit-transition: -webkit-transform 400ms ease;
+}
+
+html[oobe=new] #inner-container.down {
+  -webkit-transform: translateY(50px) rotateX(-2.5deg);
+}
+
 #security-info a,
 #security-tpm a,
 #eula a {
   color: rgb(0, 102, 104);
   text-decoration: none;
 }
 
 #eula #stats-help-link {
   color: rgb(49, 106, 197);
 }
@@ skipping 14 matching lines @@
 hr.bottom {
   background: -webkit-linear-gradient(bottom,
                                       rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
   border-bottom: 1px solid rgba(0, 0, 0, 0.5);
   height: 4px;
   z-index: 0;
 }
 
 #header {
   -webkit-padding-start: 45px;
-  /* TODO(thakis): Move oobe.html to a structure element, then the
-   * image set should be inserted automatically. */
-  background-image: -webkit-image-set(
-      url('chrome://theme/IDR_PRODUCT_LOGO_32') 1x,
-      url('chrome://theme/IDR_PRODUCT_LOGO_32@2x') 2x);
+  background-image: url('chrome://theme/IDR_PRODUCT_LOGO_32');
   background-position: left center;
   background-repeat: no-repeat;
   background-size: 32px;
   color: #666;
   display: -webkit-box;
   font-size: 23px;
   height: 47px;
   line-height: 45px;
   padding-top: 1px;
 }
@@ skipping 47 matching lines @@
 }
 
 html[dir=rtl]  .header-section.right {
   right: 50px;
 }
 
 html[dir=rtl]  .header-section.left {
   right: -20px;
 }
 
-html[oobe=old] .step-logo {
+html[oobe=old] #step-logo {
   display: none;
 }
 
-.step-logo {
+#step-logo {
+  -webkit-margin-start: 17px;
   position: absolute;
   top: 15px;
 }
 
-html[dir=ltr] .step-logo {
-  left: 17px;
-}
-
-html[dir=rtl] .step-logo {
-  right: 17px;
-}
-
 html[oobe=new] #connect .step-contents {
   /* TODO(nkostylev): Update after content layout changes. */
   -webkit-margin-after: 82px;
   -webkit-margin-before: 82px;
   -webkit-margin-start: 145px;
 }
 
 html[oobe=new] #eula .step-contents {
   -webkit-margin-after: 30px;
   -webkit-margin-start: 32px;
@@ skipping 14 matching lines @@
 }
 
 html[oobe=new] #user-image-screen-curtain {
   -webkit-margin-start: 8px;
 }
 
 html[oobe=new] #user-image-screen-description {
   -webkit-margin-before: 0;
 }
 
+.step {
+  position: absolute;
+}
+
 html[oobe=old] .step {
   min-height: 294px;
   opacity: 1;
-  position: absolute;
   width: 640px;
 }
 
 html[oobe=new] .step {
-  background: -webkit-linear-gradient(rgba(255,255,255,0.99),
-                                      rgba(255,255,255,0.95));
-  border-radius: 2px;
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3),
-              0 4px 23px 5px rgba(0, 0, 0, 0.2),
-              0 2px 6px rgba(0, 0, 0, 0.15);
-  position: absolute;
+  box-sizing: border-box;
+}
+
+html[oobe=new] .step.animated {
+  -webkit-transition: -webkit-transform 400ms ease,
+                      opacity 400ms ease,
+                      visibility 400ms ease;
 }
 
 html[oobe=old][dir=ltr] .step {
-  /* TODO(nkostylev): Change to new transitions. */
   -webkit-transition: left 200ms, opacity 200ms, visibility 200ms ease-in-out;
   left: 0;
 }
 
 html[oobe=old][dir=rtl] .step {
-  /* TODO(nkostylev): Change to new transitions. */
   -webkit-transition: right 200ms, opacity 200ms, visibility 200ms ease-in-out;
   right: 0;
 }
 
-.step.right {
+html[oobe=old] .step.right {
   left: 100px;
 }
 
-.step.left {
+html[oobe=old] .step.left {
   left: -50px;
 }
 
-html[dir=rtl] .step.right {
+html[oobe=old][dir=rtl] .step.right {
   right: 100px;
 }
 
-html[dir=rtl] .step.left {
+html[oobe=old][dir=rtl] .step.left {
   right: -50px;
 }
 
 .step.hidden {
   visibility: hidden;
 }
 
 /* Have to add attribute selector here otherwise style html[oobe=old] .step
    has more points. */
 html[oobe=old] .faded,
 html[oobe=old] .left,
 html[oobe=old] .right {
   opacity: 0;
 }
 
-html[oobe=new] .faded,
-html[oobe=new] .left,
-html[oobe=new] .right {
+html[oobe=new] .step.faded,
+html[oobe=new] .step.left,
+html[oobe=new] .step.right {
   opacity: 0;
 }
 
+html[oobe=new] .step.right {
+  -webkit-transform: translateX(50px);
+}
+
+html[oobe=new] .step.left {
+  -webkit-transform: translateX(-50px)
+}
+
 #footer {
   -webkit-box-align: center;
   display: -webkit-box;
 }
 
 /* TODO(nkostylev): Remove all #footer related rules. */
 html[oobe=new] #footer {
   display: none;
 }
 
@@ skipping 65 matching lines @@
 .flexible-label {
   max-width: 250px;
 }
 
 html[oobe=old] #connect {
   box-sizing: border-box;
   padding: 60px 0 0 145px;
 }
 
 /* Padding for header and buttons. */
-/* TODO(nkostylev): Extract common style for OOBE steps. */
 html[oobe=new] #connect {
-  min-height: 304px;
+  min-height: 395px;
   padding: 70px 17px 21px;
-  width: 688px;
 }
 
 html[oobe=new] #eula {
-  min-height: 304px;
+  min-height: 395px;
   padding: 70px 17px 21px;
-  width: 688px;
 }
 
 html[oobe=new] #update {
-  min-height: 284px;
+  min-height: 423px;
   padding: 70px 17px 69px;    /* Screen has no controls. */
-  width: 688px;
 }
 
 html[oobe=new] #gaia-signin {
-  height: 470px;
+  height: 609px;
   padding: 70px 17px 69px;    /* Screen has no controls. */
-  width: 688px;
+  width: 722px;
 }
 
 html[oobe=new] #user-image {
-  min-height: 352px;
+  min-height: 443px;
   padding: 70px 17px 21px;
-  width: 688px;
+  width: 702px;
 }
 
 html[oobe=new] #oauth-enrollment {
-  min-height: 518px;
+  min-height: 609px;
   padding: 70px 17px 21px;
-  width: 688px;
+  width: 722px;
 }
 
 #logging {
   clear: both;
   font-size: small;
   margin-top: 20px;
   width: 500px;
 }
 
 html[oobe=new] #logging {
@@ skipping 235 matching lines @@
 
 #button-strip {
   -webkit-box-align: center;
   -webkit-box-flex: 1;
   -webkit-box-pack: end;
   display: -webkit-box;
 }
 
 .step-controls {
   -webkit-box-pack: end;
+  -webkit-padding-end: 34px;  /* Double the padding of .step */
+  bottom: 21px;
+  box-sizing: border-box;
   display: -webkit-box;
-  height: 28px
+  height: 28px;
+  position: absolute;
+  width: 100%;
+}
+
+.animation .step-controls button {
+  /* Don't grey out disabled buttons during animation. */
+  color: buttontext !important;
 }
 
 html[oobe=old] .step-controls {
   display: none;
 }
 
 #oobe.connect #continue-button,
 #oobe.eula #back-button,
 #oobe.eula #accept-button,
 #oobe.signin #signin-button,
@@ skipping 558 matching lines @@
   width: 100%;
 }
 
 .background-initial {
   opacity: 0;
 }
 
 .background-final {
   opacity: 1;
 }