Question 1

What are CSS keyframe animations?

Accepted Answer

CSS @keyframes let you define intermediate steps in an animation sequence. You specify properties at various percentages (0% to 100%), and the browser interpolates between them.

Question 2

How do I add a new keyframe?

Accepted Answer

Click 'Add Keyframe' to create a new keyframe. Each keyframe has a percentage and property controls for transform (translateX/Y, rotate, scale), opacity, and background-color.

Question 3

What timing functions are available?

Accepted Answer

You can choose from ease, linear, ease-in, ease-out, and ease-in-out. Each controls the acceleration curve of the animation.

Question 4

Can I set the animation to loop?

Accepted Answer

Yes. Set the iteration count to 'infinite' for continuous looping, or enter a number for a specific number of repetitions.

Question 5

Is my data processed locally?

Accepted Answer

Yes. All animation CSS generation happens in your browser. No data is sent to any server.

CSS Animation Builder

CSS Animation Builder