animation-keyframes
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 ]
<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
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- polymer#Polymer/polymer#^2
- Released
- 2017-07-25
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Polymer 2.0+
- Browser
- Browser Independent
animation-keyframes - Vaadin Add-on Directory
Generator of animation keyframes for performant expand/collapse effectPerformant expand animation!
animation-keyframes generated the keyframes for this animation.
- item 1
- item 2
- item 3