oobe-carousel: Update motion according to mocks.

Bug: 1123899
Change-Id: Iecb14a15c714126b8eab2198368efc0ebe22d493
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2387022
Commit-Queue: Roman Aleksandrov <raleksandrov@google.com>
Reviewed-by: Roman Sorokin [CET] <rsorokin@chromium.org>
Cr-Commit-Position: refs/heads/master@{#803837}

chrome/browser/resources/chromeos/login/components/oobe_carousel.html

@@ -62,9 +62,9 @@
       }
 
       ::slotted(.animated) {
-        /* cubic-bezier(.51, .92, .24, 1) makes animation of transition similar
-           to basic slide rotation. */
-        transition: transform 1.0s cubic-bezier(.51, .92, .24, 1);
+        /* cubic-bezier(0.6, 0.0, 0.0, 1.0) makes animation of transition
+           similar to basic slide rotation. */
+        transition: transform 500ms cubic-bezier(0.6, 0, 0, 1.0);
       }
 
       ::slotted(.backward) {
@@ -75,6 +75,16 @@
         transform: var(--oobe-forward-slide-animation);
       }
 
+      ::slotted(.hide-slide) {
+        animation: 500ms ease 0s normal forwards 1 slide-fadeout;
+      }
+
+      @keyframes slide-fadeout {
+          0% { opacity: 1.0; }
+          60% { opacity: 1.0; } /* Starts animation at 0.6 * 0.5s = 0.3s. */
+          100% { opacity: 0; }
+      }
+
       .buttons {
         height: 20px;
         margin-inline-end: 0;
@@ -88,7 +98,8 @@
         height: 10px;
         margin: 5px;
         pointer-events: none;
-        transition: background 1s;
+        transition: background 200ms;
+        transition-delay: 100ms;
         width: 10px;
       }
       .slider-dot[active] {

chrome/browser/resources/chromeos/login/components/oobe_carousel.js

@@ -195,9 +195,7 @@ Polymer({
    * @param {EventTarget|null} slide
    */
   cleanStyles(slide) {
-    slide.classList.remove('animated');
-    slide.classList.remove('forward');
-    slide.classList.remove('backward');
+    slide.classList.remove('animated', 'forward', 'backward', 'hide-slide');
   },
 
   /**
@@ -271,6 +269,7 @@ Polymer({
     fromElement.classList.add('animated');
     toElement.classList.remove(toStyle);
     fromElement.classList.add(fromStyle);
+    fromElement.classList.add('hide-slide');
 
     toElement.addEventListener('transitionend', this.removeAnimateToHandler);
     fromElement.addEventListener(