Add transition animations to thumbnail updates in list view.

ui/file_manager/file_manager/foreground/css/file_manager.css

Index: ui/file_manager/file_manager/foreground/css/file_manager.css
diff --git a/ui/file_manager/file_manager/foreground/css/file_manager.css b/ui/file_manager/file_manager/foreground/css/file_manager.css
index 3f48669c2e2ecc981e3a9123969d75a17c85f46d..a4b785bb3e1d2522dc79790f7553d632e90c52a8 100644
--- a/ui/file_manager/file_manager/foreground/css/file_manager.css
+++ b/ui/file_manager/file_manager/foreground/css/file_manager.css
@@ -1247,6 +1247,15 @@ li[renaming=''] .badge {
   }
 }
 
+@-webkit-keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+
 /* Table splitter element */
 .table-header-splitter {
   background-image: -webkit-image-set(
@@ -1370,24 +1379,32 @@ body.check-select #list-container list li[selected] .detail-checkmark {
 }
 
 #list-container list li .detail-thumbnail {
+  height: 28px;
+  overflow: hidden;
+  position: absolute;
+  width: 28px;
+}
+
+#list-container list li .detail-thumbnail > .thumbnail {
   -webkit-user-drag: none;
   background-color: rgb(245, 245, 245);
   background-position: center;
   background-size: cover;
   border-radius: 14px;
-  height: 28px;
-  opacity: 0;
-  overflow: hidden;
+  height: 100%;
+  opacity: 1;
   position: absolute;
-  transition: opacity 220ms ease;
-  width: 28px;
+  width: 100%;
 }
 
-#list-container list li .detail-thumbnail.loaded {
-  opacity: 1;
+#list-container list li .detail-thumbnail > .thumbnail.animate {
+  -webkit-animation: fadeIn 220ms ease;
 }
 
-body.check-select #list-container list li[selected] .detail-thumbnail.loaded {
+body.check-select #list-container list li[selected] .detail-thumbnail
+> .thumbnail {
+  /* Fade out after checkmark fades in. */
+  -webkit-animation: fadeOut 0ms 220ms ease backwards;
   opacity: 0;
 }