28+ Unique CSS Animations Code

28 unique animation styles, customizable easing functions, adjustable delays, and the option for infinite looping, this tool is perfect for anyone looking to add animations effortlessly to their projects. Best of all, it instantly generates the CSS code for you.

Bounce Flash, Fade, Zoom, Flash, Pulse, Rotate, Shake and more Animations.

How It Works

1. Choose an Animation Style: Select from 28 pre-made animation options that are ready to use.
2. Select an Easing Function: Pick the easing style that best matches the tone of your animation.
3. Adjust Timing & Delay: Set the duration, delay, and overall timing to fine-tune how your animation behaves.
4. Enable Infinite Looping: Toggle the infinite loop option to make your animation repeat endlessly if needed.
5. Generate Code Instantly: The CSS code for your selected options will be generated on the spot, ready to copy and paste into your project.

<div class="text-style animation-bounce">Text Animation</div>

.text-style {
    font-size: 25px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
}
.animation-bounce {
    animation-name: bounce;
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
}
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0) }
    40% {transform: translateY(-30px) }
    60% {transform: translateY(-15px) }
}