<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.