New Research: Supply Chain Attack on Axios Pulls Malicious Dependency from npm.Details →
Socket
Book a DemoSign in
Socket
Book a DemoSign in

keyframegen

Package Overview
Dependencies
Maintainers
1
Versions
9
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

keyframegen

A JS library that generates keyframes of common animations. For use with Web Animation API or plain CSS.

latest
Source
npmnpm
Version
0.1.1
Version published
Maintainers
1
Created
Source

keyframegen

A JavaScript/TypeScript library that generates keyframes of common animations. For use with WebAnimation API or plain CSS.

Installation

npm i keyframegen

Demo/Sandbox

Visit Sandbox

View Sandbox

ES Module Usage

import { Complex } from 'keyframegen';

const complexKeyframes = new Complex();

// Chain as many transformations (scale, rotate, transform, skew) together as you wish
// using options to control duration, delay and easing of each transformation
complexKeyframes.scale();

// Output as CSS or Web Animation keyframe objects, or apply animation to an HTML element
console.log(complexKeyframes.get('css'));
console.log(complexKeyframes.get('webapi'));
complexKeyframes.applyTo(document.getElementById('myAnimatedElement'));
Output from complexKeyframes
@keyframes animation-1 { 
  0% { transform: matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  3.33% { transform: matrix3d(0.703, 0, 0, 0, 0, 0.703, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.67% { transform: matrix3d(0.87, 0, 0, 0, 0, 0.87, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  10% { transform: matrix3d(0.977, 0, 0, 0, 0, 0.977, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  13.33% { transform: matrix3d(1.03, 0, 0, 0, 0, 1.03, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  16.67% { transform: matrix3d(1.046, 0, 0, 0, 0, 1.046, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  20% { transform: matrix3d(1.042, 0, 0, 0, 0, 1.042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  23.33% { transform: matrix3d(1.029, 0, 0, 0, 0, 1.029, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  26.67% { transform: matrix3d(1.016, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  30% { transform: matrix3d(1.006, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33.33% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  36.67% { transform: matrix3d(0.997, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  40% { transform: matrix3d(0.997, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  43.33% { transform: matrix3d(0.997, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  46.67% { transform: matrix3d(0.998, 0, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  50% { transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  53.33% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  56.67% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  60% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  63.33% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  66.67% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  70% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  73.33% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  76.67% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  80% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  83.33% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  86.67% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  90% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  93.33% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  96.67% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}

(31) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {offset: 0, transform: "matrix3d(0.5, 0, 0, 0, 0, 0.5, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"}
1: {offset: 0.0333, transform: "matrix3d(0.703, 0, 0, 0, 0, 0.703, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"}
2: {offset: 0.0667, transform: "matrix3d(0.87, 0, 0, 0, 0, 0.87, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"}
3: {offset: 0.1, transform: "matrix3d(0.977, 0, 0, 0, 0, 0.977, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"}
4: {offset: 0.1333, transform: "matrix3d(1.03, 0, 0, 0, 0, 1.03, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"}
5: {offset: 0.1667, transform: "matrix3d(1.046, 0, 0, 0, 0, 1.046, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"}
6: {offset: 0.2, transform: "matrix3d(1.042, 0, 0, 0, 0, 1.042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"}
7: {offset: 0.2333, transform: "matrix3d(1.029, 0, 0, 0, 0, 1.029, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"}
8: {offset: 0.2667, transform: "matrix3d(1.016, 0, 0, 0, 0, 1.016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"}
9: {offset: 0.3, transform: "matrix3d(1.006, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"}
10: {offset: 0.3333, transform: "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"}
11: {offset: 0.3667, transform: "matrix3d(0.997, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"}
12: {offset: 0.4, transform: "matrix3d(0.997, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"}
13: {offset: 0.4333, transform: "matrix3d(0.997, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"}
14: {offset: 0.4667, transform: "matrix3d(0.998, 0, 0, 0, 0, 0.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"}
15: {offset: 0.5, transform: "matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"}
16: {offset: 0.5333, transform: "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"}
17: {offset: 0.5667, transform: "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"}
18: {offset: 0.6, transform: "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"}
19: {offset: 0.6333, transform: "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"}
20: {offset: 0.6667, transform: "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"}
21: {offset: 0.7, transform: "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"}
22: {offset: 0.7333, transform: "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"}
23: {offset: 0.7667, transform: "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"}
24: {offset: 0.8, transform: "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"}
25: {offset: 0.8333, transform: "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"}
26: {offset: 0.8667, transform: "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"}
27: {offset: 0.9, transform: "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"}
28: {offset: 0.9333, transform: "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"}
29: {offset: 0.9667, transform: "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"}
30: {offset: 1, transform: "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)"}
length: 31
proto: Array(0)


import { Simple } from 'keyframegen';

const simpleKeyframes = new Simple();

// Select one of many preset animations with options to fine tune their appearance
simpleKeyframes.set('shake');

// Output as CSS or Web Animation keyframe objects, or apply animation to an HTML element
console.log(simpleKeyframes.get('css'));
console.log(simpleKeyframes.get('webapi'));
simpleKeyframes.applyTo(document.getElementById('myAnimatedElement'));
Output from simpleKeyframes
@keyframes animation-1 { 
  0% { transform: rotate(-14.999999999999998deg); }
  10% { transform: rotate(14.999999999999998deg); }
  20% { transform: rotate(-18deg); }
  30% { transform: rotate(18deg); }
  40% { transform: rotate(-22deg); }
  50% { transform: rotate(22deg); }
  60% { transform: rotate(-18deg); }
  70% { transform: rotate(18deg); }
  80% { transform: rotate(-12deg); }
  90% { transform: rotate(12deg); }
  100% { transform: rotate(0); } 
}

(11) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0: {offset: 0, transform: "rotate(-14.999999999999998deg)"}
1: {offset: 0.1, transform: "rotate(14.999999999999998deg)"}
2: {offset: 0.2, transform: "rotate(-18deg)"}
3: {offset: 0.3, transform: "rotate(18deg)"}
4: {offset: 0.4, transform: "rotate(-22deg)"}
5: {offset: 0.5, transform: "rotate(22deg)"}
6: {offset: 0.6, transform: "rotate(-18deg)"}
7: {offset: 0.7, transform: "rotate(18deg)"}
8: {offset: 0.8, transform: "rotate(-12deg)"}
9: {offset: 0.9, transform: "rotate(12deg)"}
10: {offset: 1, transform: "rotate(0)"}
length: 11
proto: Array(0)

Other Usage

Include dist/keyframegen.min.js. Exports Complex and Simple.

Full API

View the documentation.

GitHub Repo

View the GitHub repo.

Todo

  • 3D transformations for Complex

Keywords

animation
css
javascript
typescript

FAQs

Package last updated on 18 Nov 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

Axios Supply Chain Attack Reaches OpenAI macOS Signing Pipeline, Forces Certificate Rotation

Security News

Axios Supply Chain Attack Reaches OpenAI macOS Signing Pipeline, Forces Certificate Rotation

OpenAI rotated macOS signing certificates after a malicious Axios package reached its CI pipeline in a broader software supply chain attack.

By Sarah Gooding  -  Apr 11, 2026
Don't Kill the Goose That Lays the Golden Eggs

Security News

Don't Kill the Goose That Lays the Golden Eggs

Open source is under attack because of how much value it creates. It has been the foundation of every major software innovation for the last three decades. This is not the time to walk away from it.

By Sarah Gooding  -  Apr 10, 2026
Feross on TBPN: How North Korea Hijacked Axios

Security News

Feross on TBPN: How North Korea Hijacked Axios

Socket CEO Feross Aboukhadijeh breaks down how North Korea hijacked Axios and what it means for the future of software supply chain security.

By Sarah Gooding  -  Apr 08, 2026