web-animation-recorder

Using the Puppeteer/Chrome Dev Tools API, this runs CSS animations step by step, and takes screenshots at each step to produce videos.

Requirements

• FFmpeg
• CSS Animation or Web Animations API powered animation
  • Javascript powered animations are not supported at the time

Usage

usage: record.js [-h] [--fps FPS] [--index INDEX] selector address

Record CSS animations from a website. Output will be written to output.mp4

Positional arguments:
  selector       CSS selector to record
  address        Website address of animation to record

Optional arguments:
  -h, --help     Show this help message and exit.
  --fps FPS      Frames per second to record at (default: 30)
  --index INDEX  Animation index to choose, try a different index if the
                 wrong animation is recorded (default: 0)

Demos (Click images for full quality links)

Animista Logo

CSS Xbox One Achievement by Alan Wynn

Cubewave 11 by Adam Kuhn