README.md

<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