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 -->
   9
  10 <link rel="import" href="../polymer/polymer.html">
  11 <link rel="import" href="core-animation.html">
  12
  13 <!--
  14 @group Polymer Core Elements
  15
  16 `core-animation-group` combines `core-animation` or `core-animation-group` elements to
  17 create a grouped web animation. The group may be parallel (type is `par`) or sequential
  18 (type is `seq`). Parallel groups play all the children elements simultaneously, and
  19 sequential groups play the children one after another.
  20
  21 Example of an animation group to rotate and then fade an element:
  22
  23     <core-animation-group type="seq">
  24       <core-animation id="fadeout" duration="500">
  25         <core-animation-keyframe>
  26           <core-animation-prop name="transform" value="rotate(0deg)"></core-animation-prop>
  27           <core-animation-prop name="transform" value="rotate(45deg)"></core-animation-prop>
  28         </core-animation-keyframe>
  29       </core-animation>
  30       <core-animation id="fadeout" duration="500">
  31         <core-animation-keyframe>
  32           <core-animation-prop name="opacity" value="1"></core-animation-prop>
  33         </core-animation-keyframe>
  34         <core-animation-keyframe>
  35           <core-animation-prop name="opacity" value="0"></core-animation-prop>
  36         </core-animation-keyframe>
  37       </core-animation>
  38     </core-animation-group>
  39
  40 @element core-animation-group
  41 @status beta
  42 @homepage github.io
  43 -->
  44 <polymer-element name="core-animation-group" constructor="CoreAnimationGroup" extends="core-animation" attributes="type" assetpath="">
  45
  46 </polymer-element>
  47 <script src="core-animation-group-extracted.js"></script>