[filebrowser] Yet another animation in gallery ribbon.

chrome/browser/resources/file_manager/js/image_editor/gallery.css

 /*
  * Copyright (c) 2011 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 {
   margin: 0;
   -webkit-user-select: none;
   font-family: Open Sans,Droid Sans Fallback,sans-serif;
@@ skipping 220 matching lines @@
 .gallery .filename-spacer {
   padding: 0 10px;
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-align: center;
 }
 
 .gallery .filename-spacer > input {
   background-color: transparent;
   color: white;
-  width: 40em;
+  width: 200px;
   border: none;
   outline: none;
 }
 
 .gallery .filename-spacer > input:focus {
   background-color: rgba(48, 48, 48, 0.75);
   border-right: 1px solid white;
   border-bottom: 1px solid white;
 }
 
 /* Thumbnails */
 
 .gallery .ribbon-spacer {
-  position: relative;
   display: -webkit-box;
   -webkit-box-flex: 1;
   -webkit-box-orient: horizontal;
+  -webkit-box-pack: center;
 }
 
 .gallery .toolbar .ribbon {
-  position: absolute;
-  top: 0px;
-  left: 0px;
   overflow: hidden;
   height: 100%;
+  -webkit-box-flex: 0;
   display: -webkit-box;
   -webkit-box-orient: horizontal;
-  -webkit-box-pack: left;
+  -webkit-box-pack: start;
 
+  width: 280px;
   max-width: 100%;
   -webkit-transition: max-width 500ms ease-in-out;
   z-index: 0;
 }
 
-.gallery .toolbar .ribbon[inactive] {
-  z-index: -1;
-}
-
 .gallery[editing] .toolbar .ribbon {
   max-width: 0;
 }
 
 .gallery .ribbon-image {
   display: -webkit-box;
   -webkit-box-orient: horizontal;
   -webkit-box-pack: center;
   -webkit-box-align: center;
   overflow: hidden;
   cursor: pointer;
   width: 47px;
   height: 47px;
   margin: 2px;
   border: 2px solid rgba(255,255,255,0); /* transparent white */
-
-  margin-left: 2px;
-  -webkit-transition: opacity 200ms linear;
-}
-
-.gallery .ribbon-image[inactive] {
-  opacity: 0;
-  pointer-events: none;
+  -webkit-transition: margin-left 180ms linear;
 }
 
 .gallery .ribbon-image[selected] {
   border: 2px solid rgba(255,233,168,1);
 }
 
+.gallery .toolbar .ribbon.fade-left {
+  -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 0, rgba(0,0,0,1) 40px);
+}
+
+.gallery .toolbar .ribbon.fade-right {
+  -webkit-mask-image: -webkit-linear-gradient(right, rgba(0,0,0,0) 0, rgba(0,0,0,1) 40px);
+}
+
+.gallery .toolbar .ribbon.fade-left.fade-right {
+  -webkit-mask-image: -webkit-linear-gradient(left, rgba(0,0,0,0) 0, rgba(0,0,0,1) 40px, rgba(0,0,0,1) 230px, rgba(0,0,0,0) 100%);
+}
+
 .gallery .image-wrapper {
   position: relative;
   overflow: hidden;
   width: 45px;
   height: 45px;
   border: 1px solid rgba(0,0,0,0); /* transparent black */
 }
 
-.gallery .toolbar .fade {
-  background-repeat: no-repeat;
-  background-position: center center;
-  position: absolute;
-  z-index: 10;
-  width: 55px;
-  height: 100%;
-  pointer-events: none;
-  opacity: 0;
-  -webkit-transition: opacity 200ms linear;
-}
-
-.gallery .toolbar .fade[active] {
-  opacity: 1;
-}
-
-.gallery[editing] .toolbar .fade[active] {
-  opacity: 0;
-}
-
-.gallery .toolbar .fade.left {
-  background-image: url(../../images/gallery/thumb_fade_left.png);
-}
-
-.gallery .toolbar .fade.right {
-  background-image: url(../../images/gallery/thumb_fade_right.png);
-}
-
 /* Editor buttons */
 
 .gallery .toolbar .edit-bar {
   position: absolute;
   overflow: hidden;
   pointer-events: none;
   right: 0;
   width: 75%;
   height: 55px;
   color: white;
@@ skipping 373 matching lines @@
 }
 
 .gallery .share-menu > div:hover {
   background-color: rgba(240,240,240,1);
 }
 
 .gallery .share-menu > div > img {
   margin-right: 5px;
   display: block;
 }