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

// 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) {
    const 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) {
    const 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;
  }
});