https://github.com/yerkopalma/keyframe-parser

Parse a valid css keyframe string into a Keyframe Object for the Web Animations API
https://github.com/yerkopalma/keyframe-parser

Last synced: about 2 months ago
JSON representation

Parse a valid css keyframe string into a Keyframe Object for the Web Animations API

• Host: GitHub
• URL: https://github.com/yerkopalma/keyframe-parser
• Owner: YerkoPalma
• License: mit
• Created: 2018-02-25T01:39:14.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-02-27T15:22:18.000Z (over 7 years ago)
• Last Synced: 2025-03-25T08:42:43.885Z (2 months ago)
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/keyframe-parser
• Size: 2.93 KB
• Stars: 6
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# keyframe-parser

[![Build Status](https://img.shields.io/travis/YerkoPalma/keyframe-parser/master.svg?style=flat-square)](https://travis-ci.org/YerkoPalma/keyframe-parser) [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat-square)](https://github.com/feross/standard)

Parse a valid css keyframe string into a Keyframe Object for the Web Animations API.

## Usage

```js

var keyframe = require('keyframe-parser')

var animation = require('nanoanimation')

var move = animation(keyframe`@keyframes move {

  from {

    top: 0px;

  },

  to {

    top: 100px;

  }

}`, 1000)

move(document.getElementById('elem'), () => console.log('done'))

```

## API

### `var keyframe = require('keyframe-parser')`

A single function is exported and is a [tagged template literal][tagged_templates].

Pass in a string for a css keyframe animation definition, and it will return a [Keyframe Object][keyframe_formats]

to be used with the [Web Animation API][web_animation].

## License

[MIT](/license)

[tagged_templates]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates

[keyframe_formats]: https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats

[web_animation]: https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_Web_Animations_API