← Back

animation-keyframes

Generator of animation keyframes for performant expand/collapse effect

Author

Rating

Popularity

<100

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

<animation-keyframes>

Name: animation-keyframes
Availability: InStock
Rating: 5 (133 reviews)
Author: valdrinkoshi

<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

Compatibility

(Loading compatibility data...)

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 effect

**[ This description is mirrored from README.md at [github.com/valdrinkoshi/animation-keyframes](https://github.com//valdrinkoshi/animation-keyframes/blob/v0.4.2/README.md) on 2019-05-10 ]** [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/valdrinkoshi/animation-keyframes) [![Build Status](https://travis-ci.org/valdrinkoshi/animation-keyframes.svg?branch=master)](https://travis-ci.org/valdrinkoshi/animation-keyframes) # \ \ generates keyframes for performant expand/collapse. See more details on this technique [here](https://developers.google.com/web/updates/2017/03/performant-expand-and-collapse). Use this element to generate the stylesheet and save it as a static resource. ```html

Performant expand animation!

animation-keyframes generated the keyframes for this animation.

item 1
item 2
item 3

``` ## Live demo https://valdrinkoshi.github.io/animation-keyframes/ ## Contributing ### Install the Polymer-CLI First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/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](https://github.com/Polymer/web-component-tester). Run `polymer test` to run your application's test suite locally. ## License [MIT](https://opensource.org/licenses/MIT)

Directory