MD Settings: Shorten page fade transitions

chrome/browser/resources/settings/animation/fade_animations.js

Index: chrome/browser/resources/settings/animation/fade_animations.js
diff --git a/chrome/browser/resources/settings/animation/fade_animations.js b/chrome/browser/resources/settings/animation/fade_animations.js
new file mode 100644
index 0000000000000000000000000000000000000000..1fbd3bcd6bb2e30e25cf5be7d88054cdd4f1eb47
--- /dev/null
+++ b/chrome/browser/resources/settings/animation/fade_animations.js
@@ -0,0 +1,51 @@
+// Copyright 2017 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.
+
+/**
+ * @fileoverview Defines fade animations similar to Polymer's fade-in-animation
+ * and fade-out-animation, but with Settings-specific timings.
+ */
+Polymer({
+  is: 'settings-fade-in-animation',
+
+  behaviors: [Polymer.NeonAnimationBehavior],
+
+  configure: function(config) {
+    var node = config.node;
+    this._effect = new KeyframeEffect(
+        node,
+        [
+          {'opacity': '0'},
+          {'opacity': '1'},
+        ],
+        /** @type {!KeyframeEffectOptions} */ ({
+          duration: settings.animation.Timing.DURATION,
+          easing: settings.animation.Timing.EASING,
+          fill: 'both',
+        }));
+    return this._effect;
+  }
+});
+
+Polymer({
+  is: 'settings-fade-out-animation',
+
+  behaviors: [Polymer.NeonAnimationBehavior],
+
+  configure: function(config) {
+    var node = config.node;
+    this._effect = new KeyframeEffect(
+        node,
+        [
+          {'opacity': '1'},
+          {'opacity': '0'},
+        ],
+        /** @type {!KeyframeEffectOptions} */ ({
+          duration: settings.animation.Timing.DURATION,
+          easing: settings.animation.Timing.EASING,
+          fill: 'both',
+        }));
+    return this._effect;
+  }
+});