CSS Animation Generator - @keyframes Builder Online Free

Build CSS @keyframes animations with live preview. Set duration, easing, iteration, direction, and custom from/to CSS property values

CSS Tools

Tool

CSS Property to Animate

FromTo

Duration (1s)

TimingIterationsDirection

CSS

@keyframes anim_R_hbqav5ubqiudb_ {
  from { transform: translateX(0px); }
  to { transform: translateX(100px); }
}

.element {
  animation: anim_R_hbqav5ubqiudb_ 1s ease infinite alternate;
}

How to Use

1Choose the CSS property to animate (e.g. transform, opacity, background-color)
2Set the 'from' and 'to' values for that property
3Adjust duration, timing function, iteration count, and direction
4Watch the live preview animate with your settings
5Copy the full @keyframes + animation CSS and paste it into your stylesheet

Frequently Asked Questions

Most CSS properties that have numeric or color values can be animated, including transform, opacity, background-color, width, height, and font-size. Properties that are not animatable (like display) will not interpolate smoothly.

iteration-count controls how many times the animation plays. Setting it to 'infinite' loops the animation forever; setting it to a number plays it that many times.

alternate makes the animation play forward on odd iterations and backward on even iterations. This creates a smooth back-and-forth effect without abrupt jumps.

Copy the @keyframes block and the animation shorthand property. Add the @keyframes to your CSS file and set the animation property on the element you want to animate.

How to Use

1Choose the CSS property to animate (e.g. transform, opacity, background-color)

2Set the 'from' and 'to' values for that property

3Adjust duration, timing function, iteration count, and direction

4Watch the live preview animate with your settings

5Copy the full @keyframes + animation CSS and paste it into your stylesheet

Frequently Asked Questions

iteration-count controls how many times the animation plays. Setting it to 'infinite' loops the animation forever; setting it to a number plays it that many times.

alternate makes the animation play forward on odd iterations and backward on even iterations. This creates a smooth back-and-forth effect without abrupt jumps.

Copy the @keyframes block and the animation shorthand property. Add the @keyframes to your CSS file and set the animation property on the element you want to animate.