CSS Animation Keyframe Generator

Animation Settings

Step Properties (at 0%)

Timeline

Click on the timeline to add a keyframe step. Select a step to edit or remove it.

Using the Keyframe Animation Generator

This tool helps you visually create CSS animations by defining keyframe steps on a timeline. It simplifies the process of writing complex @keyframes rules.

  1. Configure Animation Settings. Give your animation a name and set the total duration in milliseconds.
  2. Build Your Timeline. The timeline represents the start (0%) to the end (100%) of your animation.
    • Add a step by clicking anywhere on the timeline.
    • Select a step by clicking on a circle. The selected step turns blue.
    • Remove a step by selecting it and then clicking the "Remove Step" button.
  3. Define Step Properties. With a step selected, use the sliders to control the element's properties at that specific point in the animation. You can change its position, size, rotation, and opacity.
  4. Preview and Copy. The preview box on the right will play your animation on a loop. When you are satisfied, copy the full CSS code, which includes the @keyframes rule and a sample class to apply it.

Understanding CSS @keyframes

CSS animations work by allowing an element to gradually change from one set of styles to another. The @keyframes at-rule is how you define the stages and styles of the animation sequence.

Syntax

@keyframes my-animation-name {
  from { /* Styles at 0% */ }
  50% { /* Styles at 50% */ }
  to { /* Styles at 100% */ }
}

You can define as many intermediate steps (percentages) as you need to create a complex animation. The browser will then smoothly interpolate the styles between these keyframes over the animation's duration.

Applying the Animation

Once you have defined a @keyframes rule, you apply it to an element using the animation shorthand property or its longhand properties.

.my-element {
  animation: my-animation-name 2000ms infinite alternate ease-in-out;
}
PropertyDescription
animation-nameThe name of the @keyframes rule to apply.
animation-durationHow long the animation takes to complete one cycle.
animation-iteration-countHow many times the animation should repeat (e.g., 3 or infinite).
animation-directionSets whether the animation should play forwards, backwards, or alternate (normal, reverse, alternate).
animation-timing-functionControls the speed curve of the animation (linear, ease-in, ease-out).
animation-fill-modeSpecifies the styles for the element when the animation is not playing (e.g., before it starts or after it ends).

Performance Tip: Use transform and opacity

For the smoothest animations, it is usually best to only animate the CSS properties transform and opacity if possible. Animating these properties can be handled by the browser's GPU, which is highly efficient and less likely to cause stuttering or "jank". Animating other properties like width, height, or margin requires the browser to perform more expensive layout recalculations, which can lead to poor performance, especially on mobile devices.