Motion Studio Pro

Design an animation and get the CSS

Writing @keyframes by hand means guessing values, saving, refreshing and repeating. This generator lets you set the keyframes in a list of small forms, watch a preview object move in real time, and then copy production-ready CSS. It focuses on the properties designers use most: movement along the horizontal axis, scale, rotation and opacity.

Using the keyframe editor

1. In Animation Configuration, set the Duration and Delay in seconds and choose a Timing Function: Ease, Linear, Ease In, Ease Out or Elastic (a bounce-style cubic Bezier).
2. Optionally start from a template. The Quick Templates are Bounce, Pulse, Rotate and Shake, and each one replaces the current keyframes.
3. Under Keyframes (0% - 100%), edit each row: position in percent, scale, rotation in degrees, horizontal offset in pixels and opacity between 0 and 1.
4. Press Add Keyframe to insert another step, or the trash icon to delete one.
5. Click Run & Generate Animation. The preview icon restarts and loops, and the code appears underneath.
6. Use Copy CSS to copy everything.

Keyframes are sorted by position whenever the list redraws, so you can enter them in any order.

What the output contains

You receive a @keyframes block named customAnim, followed by an .element rule that applies it with your duration, timing function and delay. Every step uses one transform line combining translateX, scale and rotate, plus an opacity line. The animation is set to repeat forever, which makes it easy to judge in the preview. If you want it to play once, change infinite to 1 in the copied code.

Where it is handy

• Loading indicators and pulsing call-to-action buttons.
• Attention shakes for form errors or notification badges.
• Subtle hover or entrance effects for cards and icons.
• Learning how keyframe percentages and easing change the feel of motion.

Points to remember

The name customAnim and the selector .element are placeholders. Rename them before adding the code to a real stylesheet, especially if you paste more than one animation. Changes typed into the keyframe fields are applied when you press Run & Generate, so click it after editing to see the update. Only the properties in the form are available, so effects like colour changes, vertical movement or skew need to be added to the copied code by hand.

For smooth performance, transform and opacity are also the properties browsers animate most cheaply, which is one more reason this set works well for interface motion. The editor runs in your browser as JavaScript.

Related Tools

• Add Line Breaks
• Add Prefix
• Add Suffix
• Add Watermark