Generator of animation keyframes for performant expand/collapse effect

[ This description is mirrored from README.md at github.com/valdrinkoshi/animation-keyframes on 2019-05-10 ]

Published on webcomponents.org Build Status

<animation-keyframes>

<animation-keyframes> generates keyframes for performant expand/collapse. See more details on this technique here.

Use this element to generate the stylesheet and save it as a static resource.

<animation-keyframes
      animation-name="myAnimation"
      preset="vertical-expand"
      duration="200">
</animation-keyframes>

<style>
  .myAnimation { outline: 1px solid lightgray; }
  .myAnimationInverse { padding: 10px; }
  .myAnimation, .myAnimationInverse {
    transform-origin: top left;
    animation-delay: 400ms;
    animation-fill-mode: both;
  }
</style>
<div class="myAnimation">
  <div class="myAnimationInverse">
    <h3>Performant expand animation!</h3>
    <p>animation-keyframes generated the keyframes for this animation.</p>
    <ul>
      <li>item 1</li>
      <li>item 2</li>
      <li>item 3</li>
    </ul>
  </div>
</div>

Live demo

https://valdrinkoshi.github.io/animation-keyframes/

Contributing

Install the Polymer-CLI

First, make sure you have the Polymer CLI installed. Then run polymer serve to serve your element locally.

Viewing Your Element

$ polymer serve

Running Tests

$ polymer test

Your application is already set up to be tested via web-component-tester. Run polymer test to run your application's test suite locally.

License

MIT

Install

Link to this version
ImportedReleased 25 July 2017MIT License
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
bower install --save valdrinkoshi/animation-keyframes"#0.4.2"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 0.4.2

Dependencies

  • polymer#Polymer/polymer#^2