CSS My Keyframes

A CSS3 Keyframe Generator.

Total number of keyframes in your css animation. Include 0% (start) and 100% (end).

Write any CSS as a template for each keyframe.

Use these tokens where needed:

  • {0} {1} {2} etc. - Specifies arguments. These will be replaced by the values specified in 'Keyframe values' in order.
  • {v} - Specifies where to place vendor prefixes for experimental CSS properties.

Example:
margin-left: {0}px; {v}box-shadow: 0 0 {1}px #000;

Specify the keyframe values that will be inserted into the {arguments}. (extra values will be cut, fewer values will use the last).

Separate each argument with a comma (,).

Separate each keyframe with a new line (\n)

TODO

  • Controls for demo animation
  • Non-JS version of tool
  • Intelligently add vendor prefixes to experimental properties only.
  • More output formatting options

Any other requests email or tweet me

Report bugs

See Demo

Scroll right to see the animation