See the Pen Animator.js example by Gao (@gao-sun) on CodePen.

class Animator.Frame

// Constrcutor new Frame(styles, configs)

Both styles/configs can be a CSS selector string or an object. For the styles object, just write the same keys and values as CSS. For example:

{ background: 'rgba(100,100,100,.5)', transform: 'translateX(100px) rotateZ(90deg)' }

The configs object is almost the same as CSS animation properties, but without the prefix "animation-". Note: "play-state" and "name" are not supported. For example:

{ 'duration': '.5s', 'fill-mode': 'forwards', 'timing-function': 'linear' }

It's also fine if you'd like to configure the frame by CSS, and don't forget the prefix:

/* In CSS */ .frame { margin-left: 100px; transform: translateX(100px); } .config { animation-duration: .5s; animation-fill-mode: forwards; }