animation-keyframes | Vaadin

Generator of animation keyframes for performant expand/collapse effect

[ This description is mirrored from at on 2019-05-10 ]

Published on Build Status


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


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

Live demo


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.




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


  • polymer#Polymer/polymer#^2