third_party/polymer/components-chromium/core-animation/core-animation-group.html

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 --><html><head><link rel="import" href="../polymer/polymer.html">
   9 <link rel="import" href="core-animation.html">
  10
  11 <!--
  12 @group Polymer Core Elements
  13
  14 `core-animation-group` combines `core-animation` or `core-animation-group` elements to
  15 create a grouped web animation. The group may be parallel (type is `par`) or sequential
  16 (type is `seq`). Parallel groups play all the children elements simultaneously, and
  17 sequential groups play the children one after another.
  18
  19 Example of an animation group to rotate and then fade an element:
  20
  21     <core-animation-group type="seq">
  22       <core-animation id="fadeout" duration="500">
  23         <core-animation-keyframe>
  24           <core-animation-prop name="transform" value="rotate(0deg)"></core-animation-prop>
  25           <core-animation-prop name="transform" value="rotate(45deg)"></core-animation-prop>
  26         </core-animation-keyframe>
  27       </core-animation>
  28       <core-animation id="fadeout" duration="500">
  29         <core-animation-keyframe>
  30           <core-animation-prop name="opacity" value="1"></core-animation-prop>
  31         </core-animation-keyframe>
  32         <core-animation-keyframe>
  33           <core-animation-prop name="opacity" value="0"></core-animation-prop>
  34         </core-animation-keyframe>
  35       </core-animation>
  36     </core-animation-group>
  37
  38 @element core-animation-group
  39 @status beta
  40 @homepage github.io
  41 -->
  42 </head><body><polymer-element name="core-animation-group" constructor="CoreAnimationGroup" extends="core-animation" attributes="type" assetpath="">
  43
  44 </polymer-element>
  45 <script charset="utf-8" src="core-animation-group-extracted.js"></script></body></html>