CSS Animations Generator

Create smooth CSS animations with keyframes

Generate CSS animations with custom properties, timing functions, and visual preview. Perfect for buttons, loaders, and UI interactions.

Animation Preview

Animation Type

Move

Rotate

Scale

Bounce

Fade

Color

Duration: 2s

Delay: 0s

Iteration Count: infinite

infinite

Timing Function

ease

linear

ease-in

ease-out

ease-in-out

cubic-bezier

Direction

Fill Mode

CSS Code

@keyframes moveAnimation {
    0% { transform: translateX(0); }
    50% { transform: translateX(100px); }
    100% { transform: translateX(0); }
}

.animated-element {
    animation: moveAnimation 2s ease infinite;
    animation-delay: 0s;
    animation-direction: normal;
    animation-fill-mode: none;
}

Common Animation Examples

Click on any example to apply it

Bounce

Rotate

Pulse

Slide

Fade In/Out

Color Change

Shake

Jump

How to Use This Tool

Choose Animation Type

Select the type of animation you want to create (move, rotate, scale, etc.).

Adjust Properties

Set duration, delay, iteration count, and timing function for your animation.

Preview & Control

Use play, pause, and stop buttons to control the animation preview.

Copy & Implement

Copy the generated CSS code and use it in your web projects.