animations.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../neon-animation/neon-animation-behavior.html">

<script>
(function() {
  Polymer({
    is: 'card-show-animation',
    behaviors: [Polymer.NeonAnimationBehavior],
    configure: function(config) {
      var node = config.node;
      this.setPrefixedProperty(node, 'transformOrigin', '50% 100%');
      this._effect = new KeyframeEffect(node,
        [{
          'transform':  'translate3D(0, -150%, 0) rotateZ(45deg)',
          'opacity':    '0',
          'box-shadow': '30px 30px 30px black'
        }, {
          'transform':  'none',
          'opacity':    '1',
          'box-shadow': '0px 5px 15px black'
        }], this.timingFromConfig(config));
      return this._effect;
    }
  });
  Polymer({
    is: 'card-hide-animation',
    behaviors: [Polymer.NeonAnimationBehavior],
    configure: function(config) {
      var node = config.node;
      this.setPrefixedProperty(node, 'transformOrigin', '50% 0');
      this._effect = new KeyframeEffect(node,
        [{
          'transform':  'none',
          'opacity':    '1',
          'box-shadow': '0px 5px 15px black'
        }, {
          'transform':  'translate3D(-100%, 0, 0) rotateZ(-15deg)',
          'opacity':    '0',
          'box-shadow': '30px 30px 30px black'
        }], this.timingFromConfig(config));
      return this._effect;
    }
  });
})();
</script>