[Search] Make the text swoosh away off the screen when the user taps the opt-in link.

chrome/browser/resources/contextual_search/promo.css

 /* Copyright 2014 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.
 */
 @font-face {
   font-family: 'Roboto';
   font-weight: 400;
   src: url(/roboto.woff) format('woff');
 }
 
@@ skipping 22 matching lines @@
   white-space: nowrap;
 }
 
 .label a {
   font-weight: bold;
   text-decoration: none;
   text-transform: uppercase;
 }
 
 #button-container {
+  -webkit-transform: none;

[huangs, 2014/08/11 16:10:51]

Probably redundant. Same below.

[pedro (no code reviews), 2014/08/11 17:54:06]

No need for transforms here. Animating the container will animate the buttons
too.

[Mathieu, 2014/08/11 21:11:03]

Acknowledged.

[Mathieu, 2014/08/11 21:11:03]

Acknowledged.

   position: fixed;
   text-align: right;
   top: calc(70% - 76px /* action bar */ - 69px /* height of content */);
   width: 100%;
 }
+
+#container {
+  -webkit-transform: none;
+  position: fixed;
+}
+
+#container.slide, #button-container.slide {
+  -webkit-transform: translate(0, 1000px);

[pedro (no code reviews), 2014/08/11 17:54:06]

Let's talk about the animation offline if you want, but I think we should use a
slide down animation. Quantum animations are coming to the Serp and the results
will fade in + slide up when revealing, so having a slide down animation
happening before that sounds counter intuitive.

I think the animation should be a simple fade out, or a fade out + translateZ
(moving away from the user).

[Mathieu, 2014/08/11 21:11:03]

Acknowledged.

+  transition: -webkit-transform 1s;
+}
+