Animation Generator

How to use Animation Generator

CSS keyframes describe states along a timeline. The browser interpolates between them using the timing function, avoiding a JavaScript loop for each frame.

1. Set duration, initial delay and repeat behavior. A finite repeat count is used when Repeat forever is disabled. Alternate direction plays forward then backward.
2. Choose a timing function. For cubic-bezier, X1 and X2 stay between 0 and 1 so time progresses correctly; Y handles may overshoot to produce anticipation or spring-like motion. The curve visualizes those handles.
3. Add keyframes with progress from 0 to 100, translation, rotation, scale and opacity. The output sorts keyframes by progress. Transform transition applies to later interactive transform changes; keyframes control the animation itself.

A practical starting point

A gentle lift communicates availability without repeatedly flashing content.

@keyframes lift { from { transform: translateY(0); } to { transform: translateY(-8px); } }
.card { animation: lift 2s ease-in-out infinite alternate; }

Common mistakes

• Large motion can cause discomfort. The generated CSS turns animation and transitions off when reduced motion is requested.
• Duplicate keyframe offsets cascade in CSS. Prefer one clear state per progress position.

Frequently asked questions