https://github.com/bendrucker/create-keyframes

Create a CSS keyframe animation in JavaScript
https://github.com/bendrucker/create-keyframes

Last synced: over 1 year ago
JSON representation

Create a CSS keyframe animation in JavaScript

• Host: GitHub
• URL: https://github.com/bendrucker/create-keyframes
• Owner: bendrucker
• License: mit
• Created: 2016-03-08T03:06:15.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2018-11-13T19:00:01.000Z (over 7 years ago)
• Last Synced: 2025-04-10T08:13:59.558Z (over 1 year ago)
• Language: JavaScript
• Homepage:
• Size: 5.86 KB
• Stars: 6
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

          
# create-keyframes [![Build Status](https://travis-ci.org/bendrucker/create-keyframes.svg?branch=master)](https://travis-ci.org/bendrucker/create-keyframes)

> Create a CSS keyframe animation in JavaScript

## Install

```

$ npm install --save create-keyframes

```

## Usage

```js

var Keyframes = require('create-keyframes')

var animation = Keyframes({

  0: {

    top: 0

  },

  100: top: 10

})

element.style.animation = animation + ' 1s'

```

Creates a normal declaration and `@-webkit-keyframe`.

## API

#### `Keyframes(data)` -> `string`

Returns the keyframe name. Caches the name so the same value will be returned for any future call with the same `data`.

##### data

*Required*  

Type: `object`

Keyframe animation data. Can be `{from, to}` or percentages (`{0, 25, 100}`). The CSS for each frame may be provided in camel case, e.g. `{fontSize: '12px'`.

## License

MIT © [Ben Drucker](http://bendrucker.me)