NTP: Add transitions.

chrome/browser/resources/new_new_tab.css

Index: chrome/browser/resources/new_new_tab.css
diff --git a/chrome/browser/resources/new_new_tab.css b/chrome/browser/resources/new_new_tab.css
index 6ef25c58a3302ac83003d35f5ab3f9fb17d96a80..41afbe2484edd346230192ad2093ef8b0a0682f4 100644
--- a/chrome/browser/resources/new_new_tab.css
+++ b/chrome/browser/resources/new_new_tab.css
@@ -281,6 +281,10 @@ html[dir=rtl] #option-menu > [command=hide]:before {
   font-size: 12px;
 }
 
+html[anim=true][enable-section-animations=true] .section {
+  -webkit-transition: top .15s;
+}
+
 .section.disabled {
   display: none !important;
 }
@@ -303,6 +307,10 @@ html[dir=rtl] #option-menu > [command=hide]:before {
   top: 4px;
 }
 
+html[anim=true] .section > h2 > .disclosure {
+  -webkit-transition: -webkit-transform .15s;
+}
+
 .section:not(.hidden) > h2 > .disclosure {
   -webkit-transform:rotate(90deg);
 }
@@ -353,13 +361,26 @@ html[dir=rtl] #option-menu > [command=hide]:before {
   padding: 5px 0 30px;
   position: absolute;
   -webkit-mask-attachment: fixed;
+  opacity: 1;
+}
+
+.maxiview.hiding {
+  opacity: 0;
+}
+
+.maxiview.hidden {
+  display: none;
+}
+
+html[anim=true] .maxiview {
+  -webkit-transition: opacity .15s;
 }
 
 .section > .miniview {
   display: none;
-  height: 24px;
   margin: 10px 0 30px;
-  overflow: hidden;
+  white-space: nowrap;
+  overflow-x: hidden;
 }
 
 .section.hidden > * {
@@ -375,10 +396,6 @@ html[dir=rtl] #option-menu > [command=hide]:before {
   margin-right: 0;
 }
 
-.maxiview.hidden {
-  display: none;
-}
-
 .miniview > span  {
   display: inline-block;
   max-width: 114px; /* Selected so that we can fit 5 items in EN-US */